ブートストラップイメージグリッドから小さなピクセルの枠線を削除するにはどうすればよいですか？

Question

私は、ブートストラップ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です：https://jsfiddle.net/coolwebs/s4531dmb/1/場合：ここで

.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ですディスプレイウィンドウのサイズを変更すると、特にfigcaptionsの間に小さな白いギャップが現れます。

これらの小さなギャップを取り除く方法はありますか？それが列を分割する方法のために起きるブートストラップの問題ですか？

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