twitter-bootstrap Bootstrap Grid 列之间的边框不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26104692/
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
Borders between columns of Bootstrap Grid not working
提问by Mauro Barrionuevo
I'm creating a page in bootstrap where I'm using 4 cols inside a row. The code:
我正在引导程序中创建一个页面，其中我在一行中使用 4 个列。代码：
<div class="row text-center">
<div class="col-md-3"> </div>
<div class="col-md-3"> </div>
<div class="col-md-3"> </div>
<div class="col-md-3"> </div>
</div>
I've added a class to each col so each could have a border.
我为每个 col 添加了一个类，因此每个 col 都可以有一个边框。
.cliente {
margin-top:10px;
border: #cdcdcd medium solid;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
The problem is that the borders should be separated by the natural gutter of the bootstrap grid and that is not working.
问题是边界应该被引导网格的自然天沟分开，这是行不通的。
Could you help me please? Thanks.
请问你能帮帮我吗？谢谢。
回答by Zim
You need to use another block element (ie; DIV) inside the columns since Bootstrap 'col-*' uses padding to create the spacing or "gutter" between the grid columns.
您需要在列内使用另一个块元素（即 DIV），因为 Bootstrap 'col-*' 使用填充来创建网格列之间的间距或“装订线”。
<div class="row text-center">
<div class="col-md-3">
<div class="cliente">
..
</div>
</div>
</div>
回答by Carlos Macias
You can use outlineproperty. NO clientediv is needed.
您可以使用outline财产。NOcliente需要股利。
.row > div {
margin-top:10px;
padding: 20px;
outline: 2px solid #ccc;
outline-offset: -10px;
-moz-outline-radius: 10px;
-webkit-outline-radius: 10px;
}
回答by Ross Angus
I did a version which doesn't require extra elements, but might suffer from unequal heights:
我做了一个不需要额外元素的版本，但可能会受到高度不等的影响：
How can I add a line between two columns using Twitter Bootstraps grid system
回答by Adam Leggett
To expand on the outlinesolution, if you want a border that collapses to the same size if two adjacent columns both have borders, use box-shadow:
要扩展outline解决方案，如果您希望在两个相邻列都有边框的情况下折叠到相同大小的边框，请使用box-shadow：
box-shadow: -.5px -.5px 0 .5px #ccc, inset -1px -1px 0 0 #ccc;
The downside to box-shadowversus outlineis that box-shadowmay be rendered by any browser at a subpixel position, whereas outlines and borders snap to the nearest pixel. If a box-shadowends up on a subpixel position, it will appear soft or blurred. The only way to avoid this is to ensure you don't do things that will cause the column to be aligned on a subpixel position.
box-shadowvs的缺点outline是box-shadow任何浏览器都可以在子像素位置呈现，而轮廓和边框会对齐到最近的像素。如果 abox-shadow最终位于子像素位置，它会显得柔和或模糊。避免这种情况的唯一方法是确保您不做会导致列在子像素位置对齐的事情。
