使用大纲的自举网格重叠

我正在尝试使用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

使用大纲的自举网格重叠

回答

相关问题