Bootstrap 4カードをカード列で同じ高さにするにはどうすればよいですか？

私はBootstrap 4 alpha 2を使用しており、カードを利用しています。具体的には、公式ドキュメントから取得したこの例を使用しています。すべてのカードを同じ高さにするにはどうすればよいですか？

私が今考えられるのは、次のCSSルールを設定することだけです。

.card {
    min-height: 200px;
}

ただし、これはハードコーディングされたソリューションであり、一般的なケースでは機能しません。私の見解のコードはドキュメントのコードと同じです：

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" data-src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" data-src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card card-block card-inverse card-primary text-xs-center">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer>
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card card-block text-xs-center">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <div class="card">
    <img class="card-img" data-src="..." alt="Card image">
  </div>
  <div class="card card-block text-xs-right">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>

クラスを「行」または「列」に配置できますか？行で使用すると、カード（境界線）に表示されません。 https://v4-alpha.getbootstrap.com/utilities/flexbox/#align-items

<div class="container">
    <div class="row">
          <div class="col-lg-4 d-flex align-items-stretch">

ここでの他の回答のいくつかは「奇抜」に見えます。なぜ最小の高さ、さらには固定の高さを使用するのですか？

この問題（高さが等しい）が、浮動ブロックdivから離れる理由の一部だと思いましたか？

ブートストラップ4（ベータ2）を使用しています。一方、状況は変わったようです。同じ問題があり、簡単な解決策を見つけました。これは私のコードです：

<div class="container-fluid content-row">
    <div class="row">
        <div class="col-sm-12 col-lg-6">
            <div class="card h-100">
                … content card …
            </div>
        </div>
        … all the other cards … 
    </div>
</div>

「col-sm-12 col-lg-6」で、カードをレスポンシブにしました。「カードh-100」では、すべてのカードを親列の高さに設定しました。私のシステムではこれは機能しますが、私はプロではありません。だから、うまくいけば私は誰かを助けました。

最良のソリューションであるBootstrap 4には、必要なものがすべて揃っています。つまり、USE THE .d-flexと.flex-fillクラスです。card-decks応答がないため、を使用しないでください。私は使用しましたcol-sm、あなたは.colあなたが望むクラスを使用することができます、またはcol-lg-xxは幅の列の数を使用することができます例えば投稿が列ごとに多くの3または4を持っているなら最高のビューのために4または3

これが獣です。ブラウザウィンドウをXSに縮小して、実際の動作を確認してください。

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

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="jumbotron">
        <h1>Bootstrap 4 Cards all same height demo</h1>
        <p class="lead">by djibe.</p>
        <span class="text-muted">(thx to BS4)</span>
        <p>Dependencies : standard BS4</p>
        <p>
          Enjoy the magic of flexboxes and leave the useless card-decks.
        </p>
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                A small card content.
              </div>
            </div>
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              </div>
            </div>
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                Another small card content.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

h-100高さ100％を表すクラスを適用できます。

UPDATE：でブートストラップ4、フレキシボックスは、デフォルトであり、各card-deck列は、3枚のカードを含むであろう。カードは完全な高さまでいっぱいになります。

http://www.codeply.com/go/x91w5Cl6ip

Bootstrap 4 alpha card-columnsは、同じ高さを実際にサポートしないCSS3列を使用します（Firefoxでのみサポートされているcolumn-fillを除く）。

代わりにBootstrap 4フレックスボックスモードを有効にする場合は、代わりにcard-deckと小さなCSSを使用して高さを等しくし、3列ごとに折り返すことができます。

@media (min-width:34em) {
    .card-deck > .card
    {
        width: 29%;
        flex-wrap: wrap;
        flex: initial; 
    }
}

http://codeply.com/go/YFFFWHVoRB

コルで同じ高さの関連する
ブートストラップカード

ここに私がそれをした方法があります：

CSS：

.my-flex-card > div > div.card {
    height: calc(100% - 15px);
    margin-bottom: 15px;
}

HTML：

<div class="row my-flex-card">
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                aaaa
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                bbbb
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                cccc
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                dddd
            </div>
        </div>
    </div>
</div>

中にカードを包みます

<div class="card-group"></div>

または

<div class="card-deck"></div>

私は少し異なるアプローチをとりました。カードデッキラッパーの使用

カードブロックの高さを制限するスタイルルールを追加しました。

.card .card-block {max-height:300px;overflow:auto;}

これにより、次の結果が得られます。

あなたはカードデッキを使うことができます、それはすべてのカードを揃えます...これはブートストラップ4の公式ページから来ています。

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

別の便利なアプローチはカードグリッドです。

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

これを達成するための最も最小限の方法（私が知っていること）：

• .text-monospaceカード内のすべてのテキストに適用します。
• カード内のすべてのテキストを同じ文字数に制限します。

更新

.text-truncateカードのタイトルやその他のテキストを追加します。これにより、テキストが強制的に1行になります。カードを同じ高さにします。

私は初心者ですので、何か足りないところがあればご容赦ください。

上記の多くを試しました。高さを100％に設定すると、カードは常に最も長いカードの最大長まで拡張されます。コンテナはすべて同じ長さに制限されます。

コンテナーを見たかったので、背景色を使用して何が起こっているのかを確認しました。

<div class="col-lg-3"  style="background-color: rosybrown;">
    <div class="card w-100" Style="height: 100%">
        <div class="card-body">
            <img src="images/beHappy.png" alt="" class="img-fluid rounded-circle w-25 mb-3">
            <h4>CBe Happy</h2>

これは私にとってはうまくいきました：

<div class="card card-body " style="height:80% !important">

CSSをブートストラップの一般的なCSSに強制します。

私はこの問題に遭遇しました、ほとんどの人がjQueryを使用しています...これが私の解決策です。「気にしないで、私はこれの初心者です...」

.cards-collection {
    .card-item { 
        width: 100%;
        margin: 20px 20px;
        padding:0 ;
        .card {
            border-radius: 10px;
                button {
                    border: inherit;
                }
        }
    }
}

     .container-fluid
         .row.cards-collection.justify-content-center
           .card-item.col-lg-3.col-md-4.col-sm-6.col-11
              .card.h-100

カードアイテムの高さがたとえば400px（その内容に基づく）の場合、flex-alignのデフォルトはストレッチであるため、.card-item（行の子またはカードコレクションクラス）がストレッチされます。カードの高さを親の100％にすると、この高さ全体が使用されます。

私は正しかったと思います。私ですか？

誰かが興味を持っているなら、jquery.matchHeight.jsというjqueryプラグインがあります。

https://github.com/liabru/jquery-match-height

matchHeightは、選択されたすべての要素の高さを正確に等しくします。同様のプラグインが失敗する原因となる多くのエッジケースを処理します。

カードの列には、次のものを使用します。

<div class="row match-height">

次に、サイト全体を有効にします。

$('.row.match-height').each(function() {
   $(this).find('.card').not('.card .card').matchHeight(); // Not .card .card prevents collapsible cards from taking height
});

jsfiddle

CSSで必要な高さを追加するだけです。例：

.card{
    height: 350px;
}

独自のCSSを追加する必要があります。

ドキュメンテーションを確認すると、これは石工スタイルです-そのポイントは、それらがすべて同じ高さではないということです。