css - 如何从 bootstrap 图像网格中删除微小的像素边框？

Question

我使用 Bootstrap 3.7 创建了一个图像拼贴网格。所有列都有一个图形，背景图像设置为 100% 覆盖所有内容。网格旨在让所有图像相互对齐并且完全没有间隙。

问题是，当将窗口调整为某些分辨率时，我在网格中出现了这些小(大约 1 像素的间隙)，我似乎无法摆脱它们。它们在 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/如果调整显示窗口的大小，您会看到出现小的白色间隙，尤其是在图形说明之间。

有什么方法可以消除这些小间隙？这是一个 Bootstrap 问题，因为它划分列的方式？

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