向引導行中的元素添加左右邊距

我有點困惑爲什麼引導程序不會將左右邊距應用於列，我所需要的只是一個簡單的行，其中有3列，它們之間有20像素的水平邊距。如果嘗試執行bootstrap，只需將其中一個div剪切到下一行即可。向引導行中的元素添加左右邊距

HTML

<div class="container"> 

    <div class="row"> 

    <div class="col-md-4"><p>Box 1</p></div> 
    <div class="col-md-4"><p>Box 1</p></div> 
    <div class="col-md-4"><p>Box 1</p></div> 

    </div> 

</div>

CSS

.col-md-4 { 
    background-color: tomato; 
    margin: 20px 5px; 
}

來源

2015-09-15 Eli Tamosauskas

你需要考慮的餘量。寬度是基於百分比，並沒有考慮到保證金。看看這個小提琴：https：//jsfiddle.net/30tyx5t7/ – ACruz

試試這個：

.col-md-4 { 
    background-color: tomato; 
    margin: 20px 5px !important; 
}

來源

2015-09-15 21:53:43 Kehlan

這不是一個好主意，因爲如果你想在其他地方有一個正常的Bootstrap行爲的col-md-4，它不會以正確的方式工作！不要更改Bootstrap的類。改爲添加您自己的班級！ – Sun

多一點空間，你可以這樣做：

<div class="col-md-3 col-md-offset-1"><p>Box 1</p></div> 
<div class="col-md-3 col-md-offset-1"><p>Box 1</p></div> 
<div class="col-md-3 col-md-offset-1"><p>Box 1</p></div>

來源

2015-09-15 21:57:16 Dominofoe

引導滑倒在一個新行，因爲它列布局最多12列。

如果您有3格*（4格寬+邊距 - 右邊）您超過了提供的12列。

您可以通過設置DIV稍微薄一點，即3中的引導欄，就像這樣：

<div class="col-md-3 custom-box"><p>Box 1</p></div> 
<div class="col-md-3 custom-box"><p>Box 1</p></div> 
<div class="col-md-3 custom-box"><p>Box 1</p></div>

並應用CSS規則是這樣的：

.custom-box{ 
    margin-right: 20px 5px!important; 
    background-color: tomato; 
}

這裏是一個FIDDLE

來源

2015-09-15 22:03:03 Chris

列的左右頁邊將破壞Bootstrap的網格行爲。不要修改Bootstrap的類。加你的自己的類改爲。

在你的例子中增加了一個額外的<div>在的列。並給它一個保證金。

HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="spacer"> 
       <p>Box 1</p> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="spacer"> 
       <p>Box 1</p> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="spacer"> 
       <p>Box 1</p> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="spacer"> 
       <p>Box 1</p> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="spacer"> 
       <p>Box 1</p> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="spacer"> 
       <p>Box 1</p> 
      </div> 
     </div> 
    </div> 
</div>

CSS

.spacer { 
    background-color: tomato; 
    margin: 20px 5px; 
}

Demo

來源

2015-09-16 10:50:41 Sun

很好的解決方案.. –

向引導行中的元素添加左右邊距

回答

相關問題