Question

我使用Bootstrap 3.7创建了一个图像平铺网格。所有的cols都有一个里面的数字，背景图像设置为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/如果你调整显示窗口的大小，你会看到出现小的白色间隙，特别是在无花果之间。

有没有办法摆脱这些小差距？它是否因为分割列的方式而发生引导问题？

Answer 1

这是一个非常奇怪的问题，也许几乎是一个边缘案例＆＃39;。我的解决方案是在列的两边添加微小的负边距：

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

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

1 个答案: