css - 如何从引导图像网格中删除微小的像素边界？

我已经使用Bootstrap 3.7创建了图像图块网格。所有列中都有一个人物，里面的背景图像设置为覆盖所有内容的100％。网格的目的是使所有图像相互对齐，并且完全没有间隙。

问题是，当将窗口大小调整为某些分辨率时，我会在网格中看到这些小的（大约1px的间隙），但似乎无法摆脱它们。它们在figcaption元素上变得更加突出。

以下是HTML代码的示例（通过列重复）：

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <a href="#" class="rwp-site">
        <figure class="project-box" style="background-color: purple">
          <figcaption>
            <div class="site-title">
              <p>
              Site title #1
              </p>
            </div>
          </figcaption>
        </figure>
      </a>
    </div>
  </div>
</div>

这是CSS：

.container {
  background: aqua;
}

.col-xl-2, .col-lg-3, .col-md-4, .col-sm-6 .col-xs-12 {
    padding-left: 0;
    padding-right: 0;
    overflow: visible;
}
.project-box {
    height: 360px;
    /* background-color: #ccc; */
    background-size: cover;
    filter: grayscale(0);
    transform: scale(1);
    transition: all .3s ease-in-out;
}
.project-box:hover {
    filter: grayscale(1);
    transform: scale(0.98);
    transition: all .3s ease-in-out;
}
figcaption {
    position: absolute;
    display: table;
    width: 100%;
    height: 35%;
    background: rgba(0,0,0,0.6);
    color: white;
    font-size: 2.5rem;
    text-align: center;
    font-family: 'didact', sans-serif;
}
.rwp-site {
    display: block;
}
.rwp-site:hover figcaption {
    color: lightblue;
}
.rwp-site:before { bottom: 10px; left: 10px; }
.rwp-site figcaption { left: 0; bottom: 0; }

figcaption .site-title {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    padding: 0px 20px;
}

figcaption p {
    margin: 0 auto;
}
.col-md-12.sites-sorting-menu, .bc-footer .col-md-12 {
    text-align:center;
}

这是我用来重现问题的jsfiddle：https://jsfiddle.net/coolwebs/s4531dmb/1/如果您调整显示窗口的大小，您将看到出现小的白色缝隙，尤其是在figcaptions之间。

有什么方法可以消除这些小的空白？是否由于引导列的方式而发生引导问题？

最佳答案

这是一个很奇怪的问题，也许几乎是一个“边缘案例”。我的解决方案是在列的两侧添加微小的负边距：

.col-xl-2, .col-lg-3, .col-md-4, .col-sm-6 .col-xs-12 {
margin-left: -0.5px;
margin-right: -0.5px;
}

关于css - 如何从引导图像网格中删除微小的像素边界？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42242431/