13

我在引导程序中创建一个页面，我在一行中使用 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>

我为每个列添加了一个类，因此每个列都可以有一个边框。

.cliente {
    margin-top:10px;
    border: #cdcdcd medium solid;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

问题是边界应该被引导网格的自然排水沟分开，这是行不通的。

请问你能帮帮我吗？谢谢。

4

4 回答 4

24

您需要在列内使用另一个块元素（即 DIV），因为 Bootstrap 'col-*' 使用填充来创建网格列之间的间距或“装订线”。

 <div class="row text-center">
      <div class="col-md-3"> 
        <div class="cliente"> 
          ..
        </div>
      </div>
 </div>

演示： http: //www.bootply.com/71ZVOWCFWu

于 2014-09-29T17:11:37.097 回答
7

你可以使用outline属性。cliente不需要 div 。

.row > div {
    margin-top:10px;
    padding: 20px;
    outline: 2px solid #ccc;
    outline-offset: -10px;
    -moz-outline-radius: 10px;
    -webkit-outline-radius: 10px;
 }
于 2015-03-14T18:46:34.703 回答
2

我做了一个不需要额外元素的版本，但可能会受到高度不等的影响：

如何使用 Twitter Bootstraps 网格系统在两列之间添加一条线

于 2015-03-30T08:47:43.823 回答
2

要扩展outline解决方案，如果您希望在两个相邻列都有边框的情况下折叠到相同大小的边框，请使用box-shadow：

box-shadow: -.5px -.5px 0 .5px #ccc, inset -1px -1px 0 0 #ccc;

box-shadowvs的缺点outline是它box-shadow可以由任何浏览器在子像素位置呈现，而轮廓和边框会捕捉到最近的像素。如果 abox-shadow最终位于子像素位置，它将显得柔和或模糊。避免这种情况的唯一方法是确保您不做会导致列在子像素位置上对齐的事情。

于 2017-05-26T19:30:32.017 回答