在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中使用列邊框的邊框

回答

相關問題