Использование границ на столбцах divs в Bootstrap

Question

У меня есть строка с несколькими столбцами. Я хочу, чтобы каждый div имел 1px-границу вокруг него, но везде, где есть два divs, не должно быть перекрывающихся границ (2px). Я хочу, чтобы он был как сетка, но без использования таблиц, поскольку это должно быть отзывчивым. На рисунке ниже я хочу первый эффект, а не второй. Я пробовал границы с крахом, но ничего не делал, даже добавляя «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 все вокруг