Html 向引导行中的元素添加左右边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32596296/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding left and right margin to elements in bootstrap row
提问by Eli Himself
Im a little confused why bootstrap wont apply left and right margins to the columns, all i want is a simple row with 3 columns that have like 20px horizontal margin in between each other. If try to do that bootstrap simply clips one of the divs to the next line.
我有点困惑为什么引导程序不会对列应用左右边距，我想要的只是一个简单的行，其中包含 3 列，彼此之间有 20 像素的水平边距。如果尝试执行该引导程序，只需将其中一个 div 剪辑到下一行。
html
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
css
.col-md-4 {
background-color: tomato;
margin: 20px 5px;
}
采纳答案by Sun
Left and right margins to the columns would destroy Bootstrap's grid behaviour. Don't modify Bootstrap's classes. Addyour own classesinstead.
列的左右边距会破坏 Bootstrap 的网格行为。不要修改 Bootstrap 的类。而是添加您自己的课程。
In your example put an extra <div>inthe column. And give it a margin.
在您的示例<div>中，在列中添加一个额外内容。并给它一个余量。
HTML
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
CSS
.spacer {
background-color: tomato;
margin: 20px 5px;
}
回答by Dominofoe
for a little more spacing you could do:
为了增加一点间距，你可以这样做：
<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>
回答by Kristijan Iliev
Bootstrap slips one in new row because it column layout is 12 columns max.
Bootstrap 在新行中滑动一个，因为它的列布局最多 12 列。
When you have 3 divs * (4 col width + margin-right)you excess the provided 12 columns.
当您有3 个 div * (4 col width + margin-right) 时，您会超出提供的 12 列。
You can set your div a little bit thinner, i.e. 3 medium bootstrap columns, like this:
您可以将 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>
and apply your css rule like this:
并像这样应用你的 css 规则：
.custom-box{
margin-right: 20px 5px!important;
background-color: tomato;
}
here is a FIDDLE
这是一把小提琴
回答by Kehlan Krumme
Try this instead:
试试这个：
.col-md-4 {
background-color: tomato;
margin: 20px 5px !important;
}
