2014-11-17 88 views
2

我以爲引導3使用box-sizing:border-box因此,當我試圖向2盒子大小:邊框添加邊距類時,它們彼此堆疊而不是坐在彼此的旁邊sm向上大小。bootstrap 3盒子大小不工作

<div class="blueBox col-sm-6"> 
      <input type="checkbox">foo</input> 
     </div> 
     <div class="blueBox col-sm-6" > 
      <input type="checkbox">boo</input> 
     </div> 

CSS

.blueBox { 
    background-color: #26a8e0; 
    color: white; 
    height: 100px; 
    margin: 20px; 
    box-sizing: border-box; 
    padding: 20px; 

} 

回答

4

box-sizing : border-box;屬性不包括在元件的尺寸裕度。它包括邊框寬度和paddding。這就是爲什麼他們不保持內聯。

邊界框
的寬度和高度屬性包括填充和 邊界,但不是餘量[...]

源:MDN

爲了模擬可以使用與背景顏色相同的邊框:

.blueBox { 
    background-color: #26a8e0; 
    color: white; 
    height: 100px; 
    border: 20px solid #fff; 
    box-sizing: border-box; 
    padding: 20px; 
} 
+0

我明白了,那麼如何讓我的2個盒子在它們之間有一個很好的邊距,並且仍然能夠在xs尺寸下響應? – SuperUberDuper

+0

@SuperUberDuper背景是純色嗎?因爲你可以使用邊框而不是邊距,並給出邊框'20px'的寬度和與背景相同的顏色。 –

+0

好的,謝謝我基本上想要有2個大藍盒子,周圍有一些空白區域。 – SuperUberDuper