gpt4 book ai didi

css - Bootstrap 网格使用轮廓重叠

转载 作者:行者123 更新时间:2023-11-28 05:05:19 25 4
gpt4 key购买 nike

我正在尝试使用 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,但我运气不佳。

最佳答案

由于您使用的是 2px 的轮廓,因此 1px 位于每个单元格 (col) 的边界之外。 Bootstrap 列没有边距,因此轮廓与所有 单元格重叠 1 像素。如果添加 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;
}

关于css - Bootstrap 网格使用轮廓重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39859582/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com