使用带背景的 Bootstrap 网格的一像素宽人工制品

Question

我不打算用文字来解释这个，看看这个 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，问题就会消失。因此，由于 odd/even 列比率的混合，浏览器的像素数学似乎可能导致此问题。

这可能看起来不多，但我正在处理的网站经常使用这种模式，一半的用户看到一些非常明显且难看的黑线。

有什么想法或建议的技巧吗？

Answer 1

编辑：这是实现此目的的一种 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>

Answer 2

我和一位同事得出了一个半解决方案，但我暂时不会接受这个答案，以防万一有人想出不那么骇人听闻的东西。

将最后一列的边距移动一个似乎有助于解决问题：

.row.no-gutter [class*='col-']:last-child {
    margin-right:-1px;
    margin-left:1px;
}

https://jsfiddle.net/fhf8rwno/6/

使用带背景的 Bootstrap 网格的一像素宽人工制品

One pixel wide artefact using Bootstrap grid with backgrounds

css

twitter-bootstrap

responsiveness