ブートストラップカード、私は次の要件をブートストラップ4枚のカードのグリッドを開発しようとしています

Question

：私は方法がわからないので、

• すべてのカードが1つのDIV class="row"以内に座る必要があります多くのカードがそこにあり、私は行が別の画面ブレークポイントをよく見せたいと思っています。
• この行内の列は、異なるブレークポイント（例えば、col-sm-6 col-lg-4）で異なるサイズになります。
• 任意の所与の時間に画面上に表示される任意の個々の「表示行」（例えば、1行のカード）内で、各カードは同じ高さを有するべきである。
• 各カードは、他のすべてのカードから分離されるように、その底に余白があります。

私はそこに、ほぼすべての方法を得ることができましたが、私が問題に実行している：彼らはすべて同じ高さには、各カードの下部からのマージンを殺していることを確認するために私のカードに​​を設定。

表示されている行内のすべてのカードの高さが同じで、下端に余白が残っていないようにする方法はありますか？

HTMLコード：

<div class="container"> 
    <div class="row"> 
    <div class="col-md-4 col-sm-6"> 
     <div class="card h-100 mb-4" style="background-color:#ff0000;"> 
     Test card content. 
     </div> 
    </div> 
    <div class="col-md-4 col-sm-6"> 
     <div class="card h-100 mb-4" style="background-color:#00ff00;"> 
     Test card content. Test card content. Test card content. Test card content. 
     </div> 
    </div> 
    <div class="col-md-4 col-sm-6"> 
     <div class="card h-100 mb-4" style="background-color:#0000ff;"> 
     Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. 
     </div> 
    </div> 
    <div class="col-md-4 col-sm-6"> 
     <div class="card h-100 mb-4" style="background-color:#0f0f0f;"> 
     Test card content. 
     </div> 
    </div> 
    </div> 
</div> 

JSFiddle Demo

Answer 1

実験の少し後、このいずれかを解決するのは簡単だった：私は含む列にMB-4クラスを追加するために必要なカード自体ではなく、

<div class="container"> 
    <div class="row"> 
    <div class="col-md-4 col-sm-6 mb-4"> 
     <div class="card h-100" style="background-color:#ff0000;"> 
     Test card content. 
     </div> 
    </div> 
    <div class="col-md-4 col-sm-6 mb-4"> 
     <div class="card h-100" style="background-color:#00ff00;"> 
     Test card content. Test card content. Test card content. Test card content. 
     </div> 
    </div> 
    <div class="col-md-4 col-sm-6 mb-4"> 
     <div class="card h-100" style="background-color:#0000ff;"> 
     Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. 
     </div> 
    </div> 
    <div class="col-md-4 col-sm-6 mb-4"> 
     <div class="card h-100" style="background-color:#0f0f0f;"> 
     Test card content. 
     </div> 
    </div> 
    </div> 
</div> 

私の同じ状況に悩まされている人はいません。