Bootstrap 4 のカード列を使用して石積みのレイアウトを実現するにはどうすればよいですか?-CSSチュートリアル-php.cn

Bootstrap 4 のカード列を使用して石積みのレイアウトを実現するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-12-05 13:53:11

オリジナル

621 人が閲覧しました

How to Achieve a Masonry Layout with Bootstrap 4's Card Columns?

Bootstrap 4 でフレックスボックスを使用して組積造レイアウトを作成する方法

Bootstrap 4 のフレックスボックスグリッドシステムにより、柔軟で応答性の高い列レイアウトが可能になります。行内でアイテムの高さが異なる石積みの柱レイアウトを作成するには、ブートストラップのカード列機能を利用できます。

カード列の使用

ブートストラップで説明されているとおりドキュメント:

「ラップすることで、CSS だけでカードをメイソンリーのような列に編成できます」カードは、配置を容易にするために、フレックスボックスではなく CSS 列プロパティを使用して構築されます。"

石積みのレイアウトを作成するには、単に .card をラップします。 .card-columns コンテナ内のカード要素。

例コード

これは、Bootstrap 4 のカード列機能を使用した石積みレイアウトの例です。

<div class="container">
  <div class="card-columns">
    <div class="card">
      <img class="card-img-top" src="..." alt="Image">
      <div class="card-body">...</div>
    </div>
    <div class="card">
      <blockquote class="blockquote mb-0 card-body">...</blockquote
    </div>
    <div class="card">
      <img class="card-img-top" src="..." alt="Image">
      <div class="card-body">...</div>
    </div>
    <div class="card bg-primary text-white text-center p-3">
      <blockquote class="blockquote mb-0">...</blockquote>
    </div>
    <div class="card text-center">
      <div class="card-body">...</div>
    </div>
    <div class="card">
      <img class="card-img" src="..." alt="Image">
    </div>
    <div class="card p-3 text-right">
      <blockquote class="blockquote mb-0">...</blockquote
    </div>
    <div class="card">
      <div class="card-body">...</div>
    </div>
  </div>
</div>

ログイン後にコピー

このカード列機能を組み込むことで、カスタム CSS またはフレックスボックスの配置が必要です。

以上がBootstrap 4 のカード列を使用して石積みのレイアウトを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。