Question

我不打算用文字来解释这个，只要看看这个小提琴： 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，则问题就会消失。因此，由于列比的奇/偶混合，浏览器的像素数学可能会导致这种情况。

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

有任何想法或建议的黑客攻击吗？

Answer 1

编辑：这是实现这一目标的一种黑客方式。 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

一位同事和我已经达成了一个半解决方案，但我不会接受这个答案，以防万一有人提出不那么糟糕的事情。

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

<div id='cssmenu'>
  <ul>
    <li><a href='#'><span>Home</span></a></li>
    <li class='active has-sub'><a href='#'><span>Products</span></a>
      <ul>
        <li class='has-sub'><a href='#'><span>Product 1</span></a>
          <ul>
            <li><a href='#'><span>Sub Product</span></a></li>
            <li class='last'><a href='#'><span>Sub Product</span></a></li>
          </ul>
        </li>
        <li class='has-sub'><a href='#'><span>Product 2</span></a>
          <ul>
            <li><a href='#'><span>Sub Product</span></a></li>
            <li class='last'><a href='#'><span>Sub Product</span></a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href='#'><span>About</span></a></li>
    <li class='last'><a href='#'><span>Contact</span></a></li>
  </ul>
</div>

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

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

2 个答案: