7 つの等しいブートストラップ列を実現するにはどうすればよいですか?

7 つの等しいブートストラップ列の実現

ブートストラップでは、事前定義されたクラスを使用して、等しい列を持つグリッド レイアウトを簡単に作成できます。ただし、そのような列を 7 つ作成しようとすると、デフォルトのクラスでは十分ではない可能性があります。

これを実現するには、いくつかの CSS3 @media クエリを使用してデフォルトの列幅をオーバーライドする必要があります。詳細な内訳は次のとおりです:

• 列幅の変更:

  行コンテナーとネストされた .col の専用クラス (7 列) を作成します。各列の -md-1 クラス。このアプローチを使用すると、デフォルトの列幅をオーバーライドして、この特定のシナリオに合わせてカスタマイズできます。

• メディア クエリ:

  @media クエリを実装します。さまざまな画面サイズに合わせて列幅を調整します。画面が 768px 以上の場合は、列幅を 100% に設定します。 992px 以上の画面の場合、幅は (100% / 7) = 14.285714285714285714285714285714% として計算されます。この式により、7 つの列すべての幅が同じになります。

• 作業デモ:

  ライブ コード デモは、jsbin 経由で提供されます。 [ページ全体] をクリックしてレイアウトを表示します。

これらの手順に従うことで、より広いブートストラップ コンテナー内にカスタム 7 列グリッド レイアウトを作成できます。必要に応じて、特定のデザイン要件に基づいて CSS 値を調整してください。

以上が7 つの等しいブートストラップ列を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。