Question

我在bootstrap中创建了一个页面，我在一行中使用了4个cols。代码：

<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>

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

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

问题是边框应该由引导网格的天然沟槽分开，而且不起作用。

你能帮帮我吗？谢谢。

Answer 1

你需要在列中使用另一个块元素（即; DIV），因为Bootstrap＆＃39; col - *＆＃39;使用填充来创建间距或“＃34; gutter＆＃34;在网格列之间。

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

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

Answer 2

您可以使用outline属性。 <{1}} div是必需的。

cliente

Answer 3

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

How can I add a line between two columns using Twitter Bootstraps grid system

Answer 4

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

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

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

Bootstrap Grid列之间的边界不起作用

4 个答案: