ダイナミックブートストラップカラムにボーダーボトムを追加する

Question

私はブートストラップを使ってカラムを動的に作成しています。私は、次の列を作成forループを持っている：

<div class="col-md-6 col-xs-12 inspection-category-col"> 
    <div class="media inspection-category"> 
    <div class="media-left"> 
     <a href="#"> 
     <img src="http://placehold.it/100x100"> 
     </a> 
    </div> 
    <div class="media-body inspection-category-media-body"> 
     <h3 class="media-heading inspection-category-media-heading">{{ item.title }}</h3> 
     <span class="inspection-category-media-content"> 
     {{ item.description }} 
     </span> 
    </div> 
    </div> 
</div> 

が、私は、各列の間のborder-bottomを追加したいが、私は列の数を知らないので、私は、次のロジックを処理する必要があります。

if screen md/lg && count(cols) > 2 && not last one or two cols 
    add border-bottom 
else if screen xs && not last col 
    add border bottom 
else 
    do nothing 

これを処理する最善の方法はわかりません。理想的にはCSSを使っていますが、どうしたらよいか分かりません。前もって感謝します。

Answer 1

ロジックを考えれば、これをより小さなステップに分割できます。

まず、画面サイズ。このために、私たちはcssメディアクエリを使用します。ここでは、幅が600ピクセル以上、幅が600ピクセル以下の小さな画面を定義しています。あなたのニーズに合わせてこれを変更することができます。

@media (min-width: 600px) { 
    /* large code here */ 
} 
@media (max-width: 600px) { 
    /* small code here */ 
} 

次に、大画面の境界ロジックが必要です。ここで私はそれらすべてがmyColumnのクラスを持っていると仮定します。

.myColumn:nth-last-of-type(n+3) { 
    border-bottom:1px solid black 
} 

：nth-​​last-of-typeは、括弧内の数字をリストの最後から選択します。 N + 3つの手段、リスト内の2番目の要素から選択し、すなわち、それらはクラスMYCOLUMNあなたの小さな画面用

使用

.myColumn:nth-last-of-type(n+2) { 
    border-bottom:1px solid black 
} 

を持っている場合、端から以降第三の要素を選択し、2つをスキップします。あなたはメディアの詳細を読むことができ、よりセレクタhere

で約

あなたがすることができます混乱はhere