我不打算用文字解释这一点,只要看看这个 fiddle : https://jsfiddle.net/fhf8rwno/4/
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="myBox" style="height:100px;background-color:#000;">
<div class="row no-gutter">
<div class="col-xs-7">
blbalbalabla
</div>
<div class="col-xs-5" style="height:100px;background-color:red;">
wowowowo
</div>
</div>
</div>
</div>
</div>
</div>
在 Chrome 或 Firefox(也可能是其他浏览器)中,在调整浏览器宽度时注意红色列。您应该注意到,在浏览器端的每一次其他更改中,一个一像素宽的间隙出现在父容器的右边缘,允许父背景通过。
如果我改为使用 col-xs-6
而不是 col-xs-7
和 col-xs-5
,问题就会消失.因此,由于列比率的奇数/偶数混合,浏览器的像素数学似乎可能会导致这种情况。
这可能看起来不多,但我正在处理的网站经常使用这种模式,一半的用户看到一些非常明显且难看的黑线。
有什么想法或建议的技巧吗?
最佳答案
编辑:这是实现此目的的一种 hacky 方法。 http://jsfiddle.net/fhf8rwno/8/
CSS
.row.no-gutter {
margin-left: 0;
margin-right: 0
}
.row.no-gutter [class*='col-'],
.row.no-gutter [class*='col-'] {
padding-right: 0;
padding-left: 0;
}
HTML
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="myBox" style="height:100px;background-color:#000;">
<div class="row no-gutter">
<div class="col-xs-7">
blbalbalabla
</div>
<div class="col-xs-5" style="height:100px;background-color:red; position: relative; right: -1px;">
wowowowo
</div>
</div>
</div>
</div>
</div>
</div>
关于css - 使用带背景的 Bootstrap 网格的一个像素宽的人工制品,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32143412/