CSS を使用したブートストラップでのさまざまな高さの Div のスタック
このシナリオでは、ブートストラップの行システムにより、カテゴリの最適な表示が困難になります。さまざまな高さ。メーソンリー プラグインを使用せずにこの問題に対処するには、次の CSS ソリューションを検討してください:
レスポンシブ スタッキングに表示クラスを利用する:
.visible-sm を利用する、.visible-md、および .visible-lg クラスを clearfix と組み合わせて使用します。これにより、フロートが画面サイズに基づいて適切にクリアされるようになります。
<div class="clearfix visible-md visible-lg"></div> <div class="clearfix visible-sm"></div>
実装例:
以下は、高さの異なる 2 つのカテゴリの簡略化されたデモンストレーションです。 :
<div class="row"> <div class="col-md-6"> <div class="category-div">
追加メモ:
この手法を実装すると、 Bootstrap のグリッド システム内で、さまざまな高さの div 要素の応答性の高いスタッキングを実現できます。このアプローチは、Bootstrap と互換性のある純粋な CSS ソリューションを提供し、最適なレイアウト視覚化のニーズに対応します。
以上がCSSを使用してBootstrapでさまざまな高さのDivをスタックする方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。