Bootstrap 使用轮廓重叠的网格

Question

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

代码笔：http://codepen.io/abrite/pen/OROqPy

你能确定我哪里出错了吗？我想我想在这里的某个地方使用 clear，但我运气不佳。

Answer 1

您尝试添加 "margin" 了吗？

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

Answer 2

由于您使用的是 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;
}

Answer 3

默认情况下，轮廓添加到元素外部。因此，在您的情况下，它会将每个元素的宽度和高度增加 4px。

您可以使用 outline-offset: -2px 来解决这个问题，但 IE 不支持它。

您也可以使用边框代替轮廓。

Bootstrap 使用轮廓重叠的网格

Bootstrap grid overlapping using outline

html

css

grid-layout

outline

twitter-bootstrap