Css 一个像素宽的人工制品，使用带背景的引导栅格

我不打算用语言来解释这一点，只是看看这把小提琴：

巴巴拉布拉酒店
哇哇

在Chrome或Firefox（可能还有其他浏览器）中，调整浏览器宽度时，请注意红色列。您应该注意到，在浏览器侧的每一次更改中，父容器的右边缘都会出现一个像素宽的间隙，允许父背景通过

如果我改为使用

col-xs-6

而不是

col-xs-7

和

col-xs-5

，问题就会消失。因此，由于列比率的奇偶混合，浏览器的像素数学可能会导致这种情况

这看起来可能不多，但我正在工作的网站经常使用这种模式，一半的用户看到一些非常明显和难看的暗线

---

有什么想法或建议吗？

编辑：这里有一个实现这一点的黑客方法

CSS

HTML

巴巴拉布拉酒店
哇哇

我和一位同事已经找到了一个半解决方案，但我现在还不打算接受这个答案，以防有人提出一些不太老套的东西

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

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

---

My

没有边沟

类已经删除了边距。“我仍然在你修改过的小提琴上看到同样的问题。”Dan说。这行吗？我会用CSS更新我的答案。啊，好吧，我知道你在做什么了。不幸的是，我仍然需要周围行的边距（没有边沟的行）。删除no-gotter类上的

margin right:0

似乎也可以以类似的方式解决问题，但这也不可行，因为它会将默认引导槽放回列元素的右侧。我需要在myBox上设置零槽，但在其父项上设置零槽。@Dan啊，好的，我看到了。这里有一个简单的方法。基本上只需添加

位置：相对；右：-1px

在

col-xs-5

类上。这很有效，所以我给你打勾，感谢你的努力。无论是右移还是我在下面发布的保证金转移似乎都做了同样的工作。这两种方法都很老套，但我不确定是否有人能想出更好的方法。谢谢与上面@9997的答案相当。这两种方法都在巧妙地改变元素以掩盖差距。

.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;
}

<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>

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