ホームページ > 記事 > ウェブフロントエンド > 7 つの等しいブートストラップ列を実現するにはどうすればよいですか?
7 つの等しいブートストラップ列の実現
ブートストラップでは、事前定義されたクラスを使用して、等しい列を持つグリッド レイアウトを簡単に作成できます。ただし、そのような列を 7 つ作成しようとすると、デフォルトのクラスでは十分ではない可能性があります。
これを実現するには、いくつかの CSS3 @media クエリを使用してデフォルトの列幅をオーバーライドする必要があります。詳細な内訳は次のとおりです:
列幅の変更:
行コンテナーとネストされた .col の専用クラス (7 列) を作成します。各列の -md-1 クラス。このアプローチを使用すると、デフォルトの列幅をオーバーライドして、この特定のシナリオに合わせてカスタマイズできます。
メディア クエリ:
@media クエリを実装します。さまざまな画面サイズに合わせて列幅を調整します。画面が 768px 以上の場合は、列幅を 100% に設定します。 992px 以上の画面の場合、幅は (100% / 7) = 14.285714285714285714285714285714% として計算されます。この式により、7 つの列すべての幅が同じになります。
作業デモ:
ライブ コード デモは、jsbin 経由で提供されます。 [ページ全体] をクリックしてレイアウトを表示します。
これらの手順に従うことで、より広いブートストラップ コンテナー内にカスタム 7 列グリッド レイアウトを作成できます。必要に応じて、特定のデザイン要件に基づいて CSS 値を調整してください。
以上が7 つの等しいブートストラップ列を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。