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

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添加了一个类,所以每个都可以有一个边框.

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

问题是边界应该由自举网格的天然沟槽分开,而且不起作用.

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

Answer 1

您需要在列内使用另一个块元素(即; DIV),因为Bootstrap'col-*'使用填充来创建网格列之间的间距或"装订线".

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

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

Answer 2

你可以使用outline财产.NO cliente需要股利.

.row > div {
    margin-top:10px;
    padding: 20px;
    outline: 2px solid #ccc;
    outline-offset: -10px;
    -moz-outline-radius: 10px;
    -webkit-outline-radius: 10px;
 }