アウトラインを使用したブートストラップグリッドのオーバーラップ

Question

ブートストラップを使用して流体グリッドを作成しようとしていますが、すべてのdivが同じサイズの境界線を内外に持ち、境界線ではなく輪郭線が必要です。

これを使用すると、下のボックスは常に、その真上の2つのボックスにわずかに重なります。私は古い質問を見てみましたが、これをかなり扱っているものは見つかりませんでした。

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あなたが識別できる

私が間違っているつもりですか？私はここでどこかでクリアを使用したいと思うが、私は運がたくさんあるわけではない。

Answer 1

2pxのアウトラインを使用しているため、1pxは各セルの境界（col）の外側にあります。ブートストラップ列には余白がないため、アウトラインが重複していますすべてのセルを1ピクセルで置き換えます。あなたが1ピクセルのマージンを追加した場合、輪郭が重複しないでしょう。..

.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; 
} 

Answer 2

"margin"を追加しようとしましたか？

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

Answer 3

デフォルトでは、アウトラインは要素の外側に追加されます。あなたの場合は、各要素の幅と高さに4pxを追加します。

これに対処するにはoutline-offset: -2pxを使用できますが、IEではサポートされていません。

アウトラインの代わりにborderを使用することもできます。