web-dev-qa-db-ja.com

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>
htmlcsstwitter-bootstrapbootstrap-4
64
blueSurfer

あなたは "行"または "列"にクラスを置くことができますか？あなたが行にそれを使用する場合、カード（ボーダー）上に表示されません。 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から離れる方向へ進む理由の一部であると思いましたか？

94
Kerry7777

Bootstrap 4（Beta 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"を使ってカードをレスポンシブにしました。 "card h-100"では、すべてのカードを親の列の高さに設定しました。私のシステムではこれは機能しますが、私はプロではありません。だから、うまくいけば私は誰かを助けました。

82
user3350279

最善の解決策として、Bootstrap 4に必要なものがすべて揃っています。.d-flexおよび.flex-fillクラスを使用します。 card-decksは反応しないので使わないでください。私はcol-smを使いました、あなたはあなたが望む.colクラスを使うことができます。

これが猛獣です。ブラウザウィンドウを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>
39
djibe

更新：ブートストラップ4では、flexboxがデフォルトになり、各card-deck行は3枚のカードが含まれます。カードは一杯になります。

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

Bootstrap 4のアルファ版card-columnsは、同じ高さを実際にはサポートしていないCSS3カラムを使用します（Firefoxでしかサポートされていないcolumn-fillを除く）。

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

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

http://codeply.com/go/YFFFWHVoRB

関連
Colと同じ高さのブートストラップカード

8
Zim

これが私のやり方です。

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

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

3
bsesic

カードを中に入れる

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

または

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

3
Mujtaba Kably

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

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

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

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

2
skrile

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

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

更新

カードのタイトルやその他のテキストに.text-truncateを追加してください。これはテキストを単一行に強制します。カードを同じ高さにする。

0
doncadavona