在 Bootstrap 中使用列 div 上的边框

Question

I have a row with a few columns. I want each div to have a 1px border around it, but wherever two divs touch, there shouldn't be overlapping borders (2px). I want it like a grid, but without using tables as this has to be responsive. In the picture below, I want the first effect, not the second. I've tried borders with border-collapse but it did nothing, even when adding "display:table-cell".

<div class="container">
 <div class="row">
<div class="col-xs-6 col-sm-3 col-lg-2"></div>
<div class="col-xs-6 col-sm-3 col-lg-2"></div>
<div class="col-xs-6 col-sm-3 col-lg-2"></div>
<div class="col-xs-6 col-sm-3 col-lg-2"></div>
<div class="col-xs-6 col-sm-3 col-lg-2"></div>
<div class="col-xs-6 col-sm-3 col-lg-2"></div>
 </div>
</div>

Answer 1

这可能不是最好的解决方案（可能是最简单的），但您可以添加

div {
    margin-top:-1px;
    margin-left: -1px;
}

所以然后边框重叠，它看起来像一个 1px 的边框