Bootstrap Grid System は 7 つの等しい列を作成できますか?

7 つの等しい列を持つ Bootstrap のグリッド システム

Bootstrap を使用する場合、列数が不均一なレイアウトを作成するのは難しい場合があります。 Bootstrap グリッド システムは通常、偶数に準拠するため、7 つの等しい列が実現可能かどうか疑問に思う人も多いでしょう。

その答えは、CSS3 @media クエリを使用して列幅をオーバーライドすることにあります。これを実現する方法は次のとおりです:

1. コンテナ クラスを宣言します: まず、7 つの列が存在するコンテナ クラスを作成します。例:

   <code class="html"><div class="container">
    ...
   </div></code>

2. 行と列の構造を定義します: コンテナ内で、目的のクラスを使用して 1 つの行と 7 つの列を定義します:

   <code class="html"><div class="row seven-cols">
    <div class="col-md-1">Col 1</div>
    <div class="col-md-1">Col 2</div>
    <div class="col-md-1">Col 3</div>
    <div class="col-md-1">Col 4</div>
    <div class="col-md-1">Col 5</div>
    <div class="col-md-1">Col 6</div>
    <div class="col-md-1">Col 7</div>
   </div></code>

3. 列幅の計算: 列数 (この場合は 7) に基づいて適切な列幅を決定します。幅の式は次のとおりです。

   Width = 100% / Number of Columns

   したがって、7 列の場合、幅は 100% / 7 ≈ 14.2857% となります。

4. 列幅をオーバーライドしますメディア クエリの使用: デフォルトの列幅をオーバーライドするには、CSS メディア クエリを使用して特定のブレークポイントをターゲットにします。例:

   <code class="css">@media (min-width: 992px) {
     .seven-cols .col-md-1 {
    width: 14.285714285714285714285714285714%;
     }
   }</code>

これらのメディア クエリを含めることにより、画面サイズに基づいて列幅を確実に調整できます。

動作デモ:

このオンライン デモにアクセスして、7 つの等しい列の動作を確認してください:
[デモへのリンク]

以上がBootstrap Grid System は 7 つの等しい列を作成できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。