Границы между столбцами сетки Bootstrap не работают

Question

Я создаю страницу в bootstrap, где я использую 4 столбца внутри строки. Код:

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

Я добавил класс для каждого столбца, чтобы каждый мог иметь границу.

.cliente { 
    margin-top:10px; 
    border: #cdcdcd medium solid; 
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
} 

Проблема в том, что границы должны быть отделены естественным желобом сетки бутстрапа, и это не работает.

Не могли бы вы помочь мне, пожалуйста? Благодарю.

Answer 1

В столбцах необходимо использовать другой элемент блока (т.е. DIV), так как Bootstrap 'col- *' использует отступы для создания интервала или «желоба» между столбцами сетки.

<div class="row text-center"> 
     <div class="col-md-3"> 
     <div class="cliente"> 
      .. 
     </div> 
     </div> 
</div> 

Демо: http://www.bootply.com/71ZVOWCFWu

Answer 2

Вы можете использовать outline свойство. NO cliente div необходим.

.row > div { 
    margin-top:10px; 
    padding: 20px; 
    outline: 2px solid #ccc; 
    outline-offset: -10px; 
    -moz-outline-radius: 10px; 
    -webkit-outline-radius: 10px; 
} 

Answer 3

Я сделал версию, которая не требует дополнительных элементов, но может пострадать от неравных высот:

How can I add a line between two columns using Twitter Bootstraps grid system

Answer 4

Для расширения на outline решение, если вы хотите границу, которая коллапсирует тот же размер, если две соседние столбцы и имеют границы, использовать box-shadow:

box-shadow: -.5px -.5px 0 .5px #ccc, inset -1px -1px 0 0 #ccc; 

Обратной до box-shadow против outline заключается в том, что box-shadow может отображаться любым браузером в позиции подпикселя, тогда как контуры и границы привязываются к ближайшему пикселю. Если box-shadow попадает в положение подпикселя, оно будет выглядеть мягким или размытым. Единственный способ избежать этого - убедиться, что вы не делаете то, что приведет к выравниванию столбца в позиции субпикселя.