Borders between columns of Bootstrap Grid not working

Question

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

        
                      

              相关标签:
       
      

Answer 1

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>

Demo: http://www.bootply.com/71ZVOWCFWu

Answer 2

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

Answer 3

To expand on the outline solution, if you want a border that collapses to the same size if two adjacent columns both have borders, use box-shadow:

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

The downside to box-shadow versus outline is that box-shadow may be rendered by any browser at a subpixel position, whereas outlines and borders snap to the nearest pixel. If a box-shadow ends 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.

Answer 4

You can use outline property. NO cliente div is needed.

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