選択した罫線のブートストラップカラムグリッド

Question

私はブートストラップを使用して列の行を表示しています。各列には背景イメージと境界線があり、それらの間にギャップはありません。リストに複数の列がある場合、隣接する列の境界線は、境界線の幅が異なるように見える望ましくない効果を生成します。ここでは何が起こるかです：

これは私が達成するために必要なものです：

マイHTML：

<div class="row"> 
    <div class="col-md-12"> 
     <div class="col-md-4 product" style="background: url(../img/product/prod_1.jpg) center;"> 
      <div class="container"> 
       <div class="overlay">     
       </div> 
      </div> 
     </div> 
     <div class="col-md-4 product" style="background: url(../img/product/prod_2.jpg) center;"> 
      <div class="container"> 
       <div class="overlay">     
       </div> 
      </div> 
     </div> 

     <!-- (...) --> 
    </div> 
</div> 

マイCSS/SCSS：

.product 
{ 
    //how to resolve the border issue? 
    border:2px solid $main-color-light; 

    background-position: center; 
    background-size: cover; 
    background-repeat: no-repeat; 

    .container 
    {  
    } 
} 

どのように私は達成することができますこの？

重要：行には、未定義の数の製品が含まれている可能性があります。

Answer 1

私の最初の試みから質問が変更されたので、ここでは新しい、もっと簡単な解決策があります。

まず、ブートストラップグリッドを誤って使用していると思います。 .containerクラスは既にブートストラップで使用されているので、内部要素の名前を新しいクラスに変更する必要があります。下の例では、.innerクラスを使用しました。

魔法の場合、あなたの場合は2pxの境界線が必要です。すべての要素の周りに一貫性を持たせるには、各要素に次のように指定します。margin: 0 -2px -2px 0;これにより、要素の境界線が左右に重なり、必要な効果が得られます。

これは、行に入れる要素数や合計要素数に関係なく、任意の数の要素で動作します。

body { 
 
    margin: 20px; 
 
} 
 

 
.container { 
 
    margin-bottom: 40px; 
 
} 
 

 
.product { 
 
    border: 2px solid black; 
 
    background-position: center; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    margin: 0 -2px -2px 0; 
 
} 
 

 
.inner { 
 
    min-width: 200px; 
 
    min-height: 200px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-3 col-md-3 product" style="background: url(http://placehold.it/300x300) center;"> 
 
     <div class="inner"> 
 
     <div class="overlay"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-3 col-md-3 product" style="background: url(http://placehold.it/300x300) center;"> 
 
     <div class="inner"> 
 
     <div class="overlay"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-3 col-md-3 product" style="background: url(http://placehold.it/300x300) center;"> 
 
     <div class="inner"> 
 
     <div class="overlay"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-3 col-md-3 product" style="background: url(http://placehold.it/300x300) center;"> 
 
     <div class="inner"> 
 
     <div class="overlay"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-3 col-md-3 product" style="background: url(http://placehold.it/300x300) center;"> 
 
     <div class="inner"> 
 
     <div class="overlay"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-3 col-md-3 product" style="background: url(http://placehold.it/300x300) center;"> 
 
     <div class="inner"> 
 
     <div class="overlay"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-3 col-md-3 product" style="background: url(http://placehold.it/300x300) center;"> 
 
     <div class="inner"> 
 
     <div class="overlay"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-3 col-md-3 product" style="background: url(http://placehold.it/300x300) center;"> 
 
     <div class="inner"> 
 
     <div class="overlay"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-3 col-md-3 product" style="background: url(http://placehold.it/300x300) center;"> 
 
     <div class="inner"> 
 
     <div class="overlay"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-3 col-md-3 product" style="background: url(http://placehold.it/300x300) center;"> 
 
     <div class="inner"> 
 
     <div class="overlay"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

これを行うにはいくつかの方法がありますが、一般的な考え方は、いくつかの要素の数を選択両側に余分な境界線の幅を削除することです。ここでは、3つの要素の行がある設定の例を示します。この設定は任意の数の要素の行に対して機能しますが、唯一の要件は、最後の行の要素を対象にして、下の境界線をそれらの要素に再適用することです。ここで起こっ

3つのこと：

1. （下ではなく）右と左、トップに2ピクセルの境界線を追加します。すべての要素の。
2. 最後の行（.row:nth-of-type(2) .product）の要素の下部に2pxの境界線を追加します。
3. 最後の要素（.product:not(:last-child)）以外のすべての右側の境界線を削除します。

.product { 
 
    border: 2px solid black; 
 
    border-bottom-width: 0px; 
 
    background-position: center; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
} 
 
.product:not(:last-child) { 
 
    border-right-width: 0px; 
 
} 
 
// Should be `.row:last-child .product` but there's a bug with SO 
 
.row:nth-of-type(2) .product { 
 
    border-bottom-width: 2px; 
 
} 
 
.container { 
 
    min-width: 200px; 
 
    min-height: 200px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="row"> 
 
    <div class="col-md-12"> 
 
    <div class="col-xs-4 col-md-4 product" style="background: url(http://placehold.it/300x300) center;"> 
 
     <div class="container"> 
 
     <div class="overlay"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-4 col-md-4 product" style="background: url(http://placehold.it/300x300) center;"> 
 
     <div class="container"> 
 
     <div class="overlay"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-xs-4 col-md-4 product" style="background: url(http://placehold.it/300x300) center;"> 
 
     <div class="container"> 
 
     <div class="overlay"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-md-12"> 
 
    <div class="col-xs-4 col-md-4 product" style="background: url(http://placehold.it/300x300) center;"> 
 
     <div class="container"> 
 
     <div class="overlay"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-4 col-md-4 product" style="background: url(http://placehold.it/300x300) center;"> 
 
     <div class="container"> 
 
     <div class="overlay"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-xs-4 col-md-4 product" style="background: url(http://placehold.it/300x300) center;"> 
 
     <div class="container"> 
 
     <div class="overlay"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

注：作業から:last-childを防止bug with the Stackoverflow snippet editorがあります。 .row:nth-of-type(2) .productの行は.row:last-child .productである必要があります。