使用大綱的自舉網格重疊

我正在嘗試使用Bootstrap創建一個流體網格，其中所有div都具有相同的大小邊框，內部和外部都需要大綱而非邊框。使用大綱的自舉網格重疊

當我使用這個時，底部盒子總是與它上面的兩個盒子稍微重疊。我試着翻看過去的問題，但還沒有發現任何與此相關的問題。

HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-6 col-sm-3 col-md-2 stategrid"> 
      <h5>1</h5> 
     </div> 
     <div class="col-xs-6 col-sm-3 col-md-2 stategrid"> 
      <h5>2</h5> 
     </div> 
     <div class="col-xs-6 col-sm-3 col-md-2 stategrid"> 
      <h5>3</h5> 
     </div> 
     <div class="col-xs-6 col-sm-3 col-md-2 stategrid"> 
      <h5>4</h5> 
     </div> 
     <div class="col-xs-6 col-sm-3 col-md-2 stategrid"> 
      <h5>5</h5> 
     </div> 
     <div class="col-xs-6 col-sm-3 col-md-2 stategrid"> 
      <h5>6</h5> 
     </div> 
     <div class="col-xs-6 col-sm-3 col-md-2 stategrid"> 
      <h5>7</h5> 
     </div> 
     <div class="col-xs-6 col-sm-3 col-md-2 stategrid"> 
      <h5>8</h5> 
     </div> 
     <div class="col-xs-6 col-sm-3 col-md-2 stategrid"> 
      <h5>9</h5> 
     </div> 
    </div> 
</div>

CSS：

.stategrid { 
    outline: 3px solid #000; 
    background: #B1C3CD; 
    min-height: 40px; 
    text-align:center; 
}

Codepen：http://codepen.io/abrite/pen/OROqPy

你能找出我要去哪裏錯了嗎？我假設我想在這裏使用清晰的地方，但我沒有很多運氣。

來源

2016-10-04 arb

由於您使用的2px的輪廓，1px的是每個單元（COL）的邊界之外。 Bootstrap列沒有餘量，因此輪廓重疊所有的單元格爲1px。如果添加1px的的保證金，輪廓不重疊..

.stategrid { 
    outline: 2px solid #000; 
    background: #B1C3CD; 
    min-height: 40px; 
    text-align:center; 
    margin: 1px; 
}

http://www.codeply.com/go/peZ1eNd78d

如果你想有一個3px的輪廓，保證金應該是一半（1.5px）..

.stategrid { 
    outline: 3px solid #000; 
    background: #B1C3CD; 
    min-height: 40px; 
    text-align:center; 
    margin: 1.5px; 
}

來源

2016-10-04 19:28:53 ZimSystem

這很完美。非常感謝！我正在反思。 – arb

您是否嘗試添加「邊距」？

.stategrid { 
outline: 2px solid #000; 
background: #B1C3CD; 
min-height: 40px; 
text-align:center; 
margin: 2px 2px 2px 2px; 
}

來源

2016-10-04 19:09:14 pred

默認情況下，大綱被添加到元素的外部。所以在你的情況下，它會在每個元素的寬度和高度上增加4px。

您可以使用outline-offset: -2px來抵消這一點，但IE不支持它。

您也可以使用邊框而不是大綱。

來源

2016-10-04 19:29:03

使用大綱的自舉網格重疊

回答

相關問題