我不打算用语言来解释这一点,只要看看这个小提琴: 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
and col-xs-5
,问题就会消失。因此,由于列比率的奇数/偶数混合,浏览器的像素数学似乎可能会导致这种情况。
这可能看起来不多,但我正在开发的网站大量使用这种模式,一半的用户看到一些非常明显且难看的黑线。
有什么想法或建议的黑客吗?