twitter-bootstrap Bootstrap 3 列没有间隙如何处理？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18251159/
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
How to deal with Bootstrap 3 columns have no gap?
提问by Ali Emre ?akmako?lu
I am in trouble with new Bootstrap 3 grid system. I would like to create 4 columns grid. So here's my code:
我在使用新的 Bootstrap 3 网格系统时遇到了麻烦。我想创建 4 列网格。所以这是我的代码：
<div class="row">
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
</div>
My problem is there's no gap among the columns. Grid applies padding-left and padding-right to columns instead of margin-left and margin-right.
我的问题是列之间没有间隙。网格将 padding-left 和 padding-right 应用于列而不是 margin-left 和 margin-right。
When I remove padding and add margin, It collapses. How am I gonna fix this? or Is there something that I couldn't undestand?
当我删除填充并添加边距时，它会崩溃。我要怎么解决这个问题？或者有什么我无法理解的吗？
采纳答案by Zim
If you can't use the default padding to create gaps, you'd have to add `margin-left' to the appropriate columns and also tweak the % width.
如果您不能使用默认填充来创建间隙，则必须将“margin-left”添加到适当的列并调整 % 宽度。
For example .col-lg-4usually has 33% width, so you'd decrease it a little..
例如.col-lg-4通常有 33% 的宽度，所以你会减少一点..
.col-lg-4 {
margin-left:15px;
width:31.6%;
}
Another option would be to use a container inside the columns, and then the padding will work to create the gaps.
另一种选择是在列内使用容器，然后填充将工作以创建间隙。
回答by Karl Adler
for more exact column width you may use the css3 calc() operator
要获得更精确的列宽，您可以使用css3 calc() 运算符
.col-lg-4 {
margin-left:15px;
width:31.6%; /* non-css3 fallback */
width: calc( 33.33333333% - 15px ); /* css3 calculation */
}
回答by Julián Abal
You need to contain that row into a .containerDIV. Otherwise Bootstrap understands there should be no gaps in between columns.
您需要将该行包含到.containerDIV 中。否则 Bootstrap 知道列之间不应该有间隙。
回答by Joe Fitzgibbons
I posted this herealready but it is still relevant to the original question and provides more information about how this approach works.
我已经在这里发布了它，但它仍然与原始问题相关，并提供了有关此方法如何工作的更多信息。
I have had similar issues with space between columns. The root problem is that columns in bootstrap 3 and 4 use padding instead of margin. So background colors for two adjacent columns touch each other.
我在列之间的空间方面遇到了类似的问题。根本问题是引导程序 3 和 4 中的列使用填充而不是边距。因此，两个相邻列的背景颜色相互接触。
I found a solution that fit our problem and will most likely work for most people trying to space columns and maintain the same gutter widths as the rest of the grid system.
我找到了一个适合我们问题的解决方案，并且很可能适用于大多数试图将列隔开并保持与网格系统其余部分相同的间距宽度的人。
This was the end result we were going for
这是我们想要的最终结果
Having the gap with a drop shadow between columns was problematic. We did not want extra space between columns. We just wanted the gutters to be "transparent" so the background color of the site would appear between two white columns.
列之间有阴影的间隙是有问题的。我们不希望列之间有额外的空间。我们只是希望排水沟是“透明的”，这样网站的背景颜色就会出现在两个白色列之间。
this is the markup for the two columns
这是两列的标记
<div class="row">
<div class="col-sm-7">
<div class="raised-block">
<h3>Facebook</h3>
</div>
</div>
<div class="col-sm-5">
<div class="raised-block">
<h3>Tweets</h3>
</div>
</div>
</div>
CSS
CSS
.raised-block {
background-color: #fff;
margin-bottom: 10px;
margin-left: 0;
margin-right: -0.625rem; // for us 0.625rem == 10px
padding-left: 0.625rem;
padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
.raised-block {
margin-left: -0.625rem;
}
}
.row [class^="col-"]:first-child>.raised-block {
// this is so the first column has no margin so it will not be "indented"
margin-left: -0.625rem;
}
This approach does require an inner div with negative margins just like the "row" class bootstrap uses. And this div, we called it "raised-block", must be the direct sibling of a column
这种方法确实需要一个具有负边距的内部 div，就像“行”类引导程序使用的那样。而这个 div，我们称之为“raised-block”，必须是一列的直接兄弟
This way you still get proper padding inside your columns. I have seen solutions that appear to work by creating space, but unfortunately the columns they create have extra padding on either side of the row so it ends up making the row thinner that the grid layout was designed for. If you look at the image for the desired look, this would mean the two columns together would be smaller than the one larger one on top which breaks the natural structure of the grid.
通过这种方式，您仍然可以在列内获得适当的填充。我见过似乎通过创建空间来工作的解决方案，但不幸的是，它们创建的列在行的两侧都有额外的填充，因此最终使行变得更薄，而网格布局是为此而设计的。如果您查看图像以获得所需的外观，这将意味着两列加在一起将小于顶部较大的一列，这会破坏网格的自然结构。
The major drawback to this approach is that it requires extra markup wrapping the content of each columns. For us this works because only specific columns needed space between them to achieve the desired look.
这种方法的主要缺点是它需要额外的标记来包装每一列的内容。对我们来说这是有效的，因为只有特定的列需要它们之间的空间才能实现所需的外观。
Hope this helps
希望这可以帮助
