web-dev-qa-db-ja.com

Bootstrap高さが100％で底がマージンのカード

私はBootstrap 4カードのグリッドを次の要件で開発しようとしています：

  • すべてのカードは1 div class="row"内に収まる必要があります。これは、合計カードの枚数がわからず、さまざまな画面ブレークポイントで行をきれいに表示するためです。
  • この行内の列は、ブレークポイントごとにサイズが異なります（例：col-sm-6 col-lg-4）。
  • 個々の「表示された列」内、たとえば、画面に常に1列のカードが表示されている場合、各カードの高さは同じである必要があります。
  • 各カードは、他のすべてのカードから分離されるように、下部にマージンを持つ必要があります。

私はそこまでほとんど到達することができましたが、問題が発生しています。カードにclass="h-100"を設定して、すべて同じ高さであることを確認すると、各カードの下からマージンが削除されます。

表示された行内のすべてのカードの高さを同じにし、それらの下部のマージンを維持する方法はありますか？

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

cssheightbootstrap-4marginbootstrap-grid
13
Sam

少し実験した後、これは簡単に解決できました。カード自体ではなく、mb--4クラスを含むcolumnに追加する必要がありました。

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

うまくいけば、これは私の同じ状況で立ち往生している他の人を助ける。

14
Sam