引導程序網格列之間的邊界不起作用

Question

我在引導程序中創建一個頁面，我在一行內使用4個cols。代碼：

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

我已經爲每個col添加了一個類，因此每個col都可以有邊框。

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

問題是邊框應該由引導網格的天然天溝分開，並且不起作用。

請問您能幫我嗎？謝謝。

Answer 1

由於Bootstrap'col- *'使用填充在網格列之間創建間距或「陰溝」，因此您需要在列內使用另一個塊元素（即; DIV）。

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

演示：http://www.bootply.com/71ZVOWCFWu

Answer 2

可以使用outline屬性。不需要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在子像素位置結束，它將顯得柔和或模糊。避免這種情況的唯一方法是確保您不會做將導致列在子像素位置上對齊的事情。