在Bootstrap中使用列边框的边框

我有一行有几列。我希望每个div都有一个1px的边框，但是任何有两个div的区域都不应该有重叠的边框（2px）。我希望它像一个网格，但不使用表格，因为这必须是响应式的。在下面的图片中，我想要第一个效果，而不是第二个效果。我尝试过使用border-collapse的边框，但它什么也没做，即使添加“display：table-cell”时也是如此。在Bootstrap中使用列边框的边框

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

来源

2015-11-19 Rachel S

http://www.w3schools.com/cssref/sel_nth-child.asp –

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

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

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

来源

2015-11-19 17:29:29 Trug

这绝对是最简单的解决方案，类似hacky，但它的工作原理如下：http://www.bootply.com/I1IrivYxMv你也可以使用'nnth-child'选择器来做到这一点，但是，这将需要你在每个断点处设置不同的CSS规则，并且不像这个解决方案那样跨浏览器友好。 – APAD1

谢谢，这是很好的。 –

在Bootstrap中使用列边框的边框

回答

相关问题