问题
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>
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.
Could you help me please? Thanks.
回答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
回答2:
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;
}
回答3:
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
回答4:
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.
来源:https://stackoverflow.com/questions/26104692/borders-between-columns-of-bootstrap-grid-not-working