web-dev-qa-db-ja.com

Bootstrapビューポートに基づく列数を持つ4つのカードデッキ

bootstrap 4のカードデッキ機能を実装して、すべてのカードを同じ高さにしようとしています。

bootstrapが提供する例では、4枚のNiceカードが表示されていますが、ビューポートに関係なく、4枚のカードが並んでいます。 codeply here を参照してください。

コンテンツが見栄えをよくするために、カードの最小サイズを縮小したいと思うので、これは私には意味がありません。

次に、いくつかのビューポートクラスを追加して画面サイズを分割しようとしましたが、そのdivが追加されるとすぐに、カードデッキが適用されなくなり、カードの高さが等しくなりません。

どうすればこれを達成できますか？これは、Bootstrap 4の完全リリースで対処される欠落機能ですか？

ここにフィドルがあります： https://jsfiddle.net/crrm5q9m/

<div class="card-deck-wrapper">
  <div class="card-deck">
    <div class="card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>It's really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.</p>
          <footer>Makes flexible layouts <cite title="Source Title">Faster</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".</p>
          <footer>All of this makes more <cite title="Source Title">Sense</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-warning text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>There are also some interesting new text classes for uppercase and capitalize.</p>
          <footer>These handy utilities make it <cite title="Source Title">Easy</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-info text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons.</p>
          <footer>The Glyphicons are not <cite title="Source Title">Included</cite></footer>
        </blockquote>
      </div>
    </div>
        <div class="card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>It's really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.</p>
          <footer>Makes flexible layouts <cite title="Source Title">Faster</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".</p>
          <footer>All of this makes more <cite title="Source Title">Sense</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-warning text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>There are also some interesting new text classes for uppercase and capitalize.</p>
          <footer>These handy utilities make it <cite title="Source Title">Easy</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-info text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons.</p>
          <footer>The Glyphicons are not <cite title="Source Title">Included</cite></footer>
        </blockquote>
      </div>
    </div>
  </div>
</div>
csstwitter-bootstraptwitter-bootstrap-4bootstrap-4
42
ganders

2018年に更新

responsive card-deck が必要な場合、visibility utilsを使用して、異なるビューポート幅ですべてのX列を強制的にラップします（ブレークポイント）...

Bootstrap 4 responsivecard-deck （v4.1）

Bootstrap 4 alpha 2の元の回答：

グリッドcol-*-*を使用して異なる幅を取得し（カードデッキの代わりに）、次にflexboxを使用してcolに同じ高さを設定できます。

.row > div[class*='col-'] {
  display: flex;
  flex:1 0 auto;
}

http://codeply.com/go/O0KdSG2YX2 （alpha 2）

問題は、flexboxが有効になっていないため、card-deckがtable-cellを使用するため、幅の制御が非常に困難になることです。 Bootstrap 4 Alpha 6の時点では、flexboxがデフォルトであるため、flexboxに追加のCSSは必要なく、h-100クラスはカードを完全な高さにするために使用する： http://www.codeply.com/go/gnOzxd4Spk

関連する質問：ブートストラップ4-カード列のレスポンシブカード

49
Zim

ブレークポイントに応じて1行あたりのカード数を構成するSassのソリューションを次に示します。 https://codepen.io/migli/pen/OQVRMw

Bootstrap 4 beta 3で正常に動作します

// Bootstrap 4 breakpoints & Gutter
$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px
) !default;

$grid-Gutter-width: 30px !default;

// number of cards per line for each breakpoint
$cards-per-line: (
    xs: 1,
    sm: 2,
    md: 3,
    lg: 4,
    xl: 5
);

@each $name, $breakpoint in $grid-breakpoints {
    @media (min-width: $breakpoint) {
        .card-deck .card {
            flex: 0 0 calc(#{100/map-get($cards-per-line, $name)}% - #{$grid-Gutter-width});
        }
    }
}
31
migli

カードにmin-widthを追加して、これを機能させました。

<div class="card mb-3" style="min-width: 18rem;">
  <p>Card content</p>
</div>

カードはこの幅を下回りませんが、各行を適切に埋め、高さは同じです。

5
Spanomaly
<div class="w-100 d-lg-none mt-4"></div>

4枚のカードを作成し、2番目と3番目のカードの間にこのコードを配置します。これを試してください。

5
Mohammad Ayoub Khan

この回答はBootstrap 4.1+を使用している人、およびIE 11も気にかけている人向けです

カードデッキは、ビューポートサイズに応じてカードの表示数を調整しません。

上記の方法は機能しますが、IEをサポートしません。以下の方法を使用すると、同様の機能とレスポンシブカードを実現できます。

異なるブレークポイントで表示/非表示するカードの数を管理できます。

Bootstrap 4.1+列のデフォルトの高さは同じです。カード/コンテンツが使用可能なスペースをすべて使用していることを確認してください。スニペットを実行すると、理解できます

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-lg-4 mb-3">
            <div class="card mb-3 h-100">

                <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 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>
        <div class="col-sm-6 col-lg-4 mb-3">
            <div class="card mb-3 h-100">
                <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 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>
        <div class="col-sm-6 col-lg-4 mb-3">
            <div class="card mb-3 h-100">
                <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 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>
    </div>
</div>
0
Ramesh Navi

そのための簡単な解決策があります-カード要素の固定高さを設定します-ヘッダーとボディ。このようにして、標準的なブーストラップ列グリッドを使用してレスポンシブレイアウトを設定できます。

ここに私の例があります： http://codeply.com/go/RHDawRSBol

 <div class="card-deck text-center">
    <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card mb-4">
            <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
            <div class="card-body" style="height: 20rem">
                <h4 class="card-title">1 Card title</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>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
0
Bart Gluszak

CSSグリッドを使用して修正しました。 CSSグリッドは、すべての要素を同じ行に、すべて同じ高さにします。

ただし、すべての行のすべての要素を同じ高さにすることは検討していません。

とにかく、それを行う方法は次のとおりです。

HTML：

<div class="grid-container">

  <div class="card">...</div>
  <div class="card">...</div>
</div>

CSS：

.grid-container {
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

完全なJSFiddleを次に示します。 https://jsfiddle.net/bluegrounds/owjvhstq/4/

0
bluegrounds