向引导行中的元素添加左右边距

我有点困惑为什么引导程序不会将左右边距应用于列，我所需要的只是一个简单的行，其中有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

很好的解决方案.. –

向引导行中的元素添加左右边距

回答

相关问题