twitter-bootstrap - Bootstrap 4 card-group の異なるサイズのカード

Question

Bootstrap 4 のカード グループ内に異なるサイズのカードを混在させることは可能ですか。左側のサイズに大きなカード (2 倍の幅)、右側に 2 つの小さなカードを配置し、3 つすべてを同じ高さにします。

<div class="container">
  <div class="row">
    <div class="card-group">
        <div class="card col-md-6">
          <div class="card-block">
            <h4 class="card-title">Card 1</h4>
            <p class="card-text">Text 1</p>
          </div>
        </div>
         <div class="card col-md-3">
          <div class="card-block">
            <h4 class="card-title">Card 2</h4>
            <p class="card-text">Text 2</p>
            <p class="card-text">More text 2</p>
            <p class="card-text">More text 2</p>
          </div>
        </div>
        <div class="card col-md-3">
          <div class="card-block">
            <h4 class="card-title">Card 3</h4>
            <p class="card-text">Text 3</p>
          </div>
        </div>
      </div>
    </div>
  </div>

Answer 1

https://stackoverflow.com/a/35627731/1596547も参照してください。 @Skelly によって既に説明されているように、事前定義されたグリッド クラス ( ) はby をcol-md-*設定するだけではありません。widthfloat

グリッド クラスを使用する代わりに、width直接適用することもできます。

    <div class="card-group">
        <div class="card" style="width:50%;">
          <div class="card-block">
            <h4 class="card-title">Card 1</h4>
            <p class="card-text">Text 1</p>
          </div>
        </div>
         <div class="card">
          <div class="card-block">
            <h4 class="card-title">Card 2</h4>
            <p class="card-text">Text 2</p>
            <p class="card-text">More text 2</p>
            <p class="card-text">More text 2</p>
          </div>
        </div>
        <div class="card">
          <div class="card-block">
            <h4 class="card-title">Card 3</h4>
            <p class="card-text">Text 3</p>
          </div>
        </div>
      </div>