如何从引导图像网格中删除微小的像素边框

Question

我使用 Bootstrap 3.7 创建了一个图像图块网格。所有列内部都有一个图形，背景图像设置为100%覆盖所有内容。网格旨在使所有图像彼此相对，并且根本没有间隙。

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

下面是 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/，如果您调整显示窗口的大小，您将看到出现小的白色间隙，尤其是在无花果标题之间。

有没有办法摆脱这些小差距？这是由于划分列的方式而发生的引导问题吗？

Answer 1

这是一个非常奇怪的问题，也许几乎是一个"边缘情况"。我的解决方案是在列的两侧添加微小的负边距：

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