応答性の高い列数を備えた Bootstrap 4 カードデッキで同じカードの高さを実現するにはどうすればよいですか?-CSSチュートリアル-php.cn

応答性の高い列数を備えた Bootstrap 4 カードデッキで同じカードの高さを実現するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-10-29 02:37:02

オリジナル

984 人が閲覧しました

How to Achieve Equal Card Height in a Bootstrap 4 Card-Deck with Responsive Column Count?

応答性の高い列数を備えた Bootstrap 4 カードデッキ

シナリオ:

Bootstrap 4 のカードデッキ機能を実装して、異なるビューポートサイズでカードの高さが同じになります。

問題:

デフォルトでは、カードデッキはビューポートサイズに関係なく 4 枚のカードを 1 列に表示し、コンテンツの望ましくないサイズ変更が発生します。

解決策 1: グリッド列 (Bootstrap 4 Alpha 2)

Bootstrap 4 フレックスボックスがサポートされる前は、

を使用する回避策が必要でした。カード幅を制御するために、適切なグリッド列クラス (col-* など) を持つ要素。次に、フレックスボックスを適用して同じ高さを強制しました。

<code class="css">.row > div[class*='col-'] {
  display: flex;
  flex: 1 0 auto;
}</p>
<p><strong>解決策 2: h-100 クラス (Bootstrap 4 Alpha 6 以降)</strong></p>
<p>フレックスボックスがデフォルトになるBootstrap 4 Alpha 6 では、さらに単純なソリューションが登場しました:</p>
<pre class="brush:php;toolbar:false"><code class="css">.h-100 {
  height: 100%;
}</code>

ログイン後にコピー

h-100 クラスをカード要素に適用して、高さを自動的に 100% に設定し、高さを等しくします:

<code class="html"><div class="card h-100">
  ...
</div></code>

ログイン後にコピー

注:

より応答性の高いレイアウトの場合は、d-*-col (例: d-md-col-6) などのブレークポイントクラスを使用して特定の列数を指定することを検討してください。画面サイズ

以上が応答性の高い列数を備えた Bootstrap 4 カードデッキで同じカードの高さを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。