Bootstrap网格的列之间的边框不起作用 [英] Borders between columns of Bootstrap Grid not working

问题描述

我正在使用Bootstrap创建一个页面，在其中我在一行中使用4个列.代码:

I'm creating a page in bootstrap where I'm using 4 cols inside a row. The code:

<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都可以有一个边框.

I've added a class to each col so each could have a border.

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

能帮我吗?谢谢.

推荐答案

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

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 class="row text-center">
      <div class="col-md-3"> 
        <div class="cliente"> 
          ..
        </div>
      </div>
 </div>

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

这篇关于Bootstrap网格的列之间的边框不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！