行のないブートストラップで可変サイズの div の最適なスタッキングを実現するにはどうすればよいですか?

ブートストラップ: 可変サイズの Div の最適なスタッキングの実現

提供されたレイアウトには、高さの異なる複数の div が含まれており、コンパクトにスタックする必要がありますやり方。 Bootstrap の行システムは便利ですが、このシナリオでは最適なスタッキングを妨げます。したがって、この制限を克服するために純粋な CSS ソリューションが求められています。

ソリューション

Bootstrap の行システムを使用する代わりに、「.visible-sm、.visible」を活用することを検討してください。 -md、.visible-lg」クラスと「clearfix」クラス。この戦略は、さまざまな画面サイズに応じてフロートを効果的にクリアします。

実装:

<!-- Clear floats in medium and large screens -->
<div class="clearfix visible-md visible-lg"></div>

<!-- Clear floats in small screens -->
<div class="clearfix visible-sm"></div>

参考までに、Bootstrap 3 のドキュメントを参照してください。

このアプローチdiv が適切にスタックされるようにし、さまざまな画面にわたってレイアウトの全体的な外観と機能を最適化します。決議。

以上が行のないブートストラップで可変サイズの div の最適なスタッキングを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。