ブートストラップで 7 列のレイアウトを作成できますか?

Bootstrap を使用して 7 つの等しい列を作成することは可能ですか?

Bootstrap を使用する場合、バランスの取れたレイアウトのために偶数の列を作成するのが一般的です。ただし、7 などの奇数の列が必要な状況が発生する可能性があります。

CSS による列幅のオーバーライド

Bootstrap はネイティブに 7 列システムを提供しませんが、これは、CSS を使用して列の幅をオーバーライドすることで実現できます。

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

このメディア クエリは、クラス Col-md-1 (および、col-sm-1 および Col-sm-1) ですべての列の幅を設定します。中型以上の画面の場合、col-lg-1;) から 14.285714285714285714285714285714%。これにより、列の均等な分散が保証されます。

親クラスの使用

7 つの列を含めるには、オーバーライドを適用するクラス seven-cols の親要素が必要です。

<code class="html"><div class="container">
  <div class="row seven-cols">
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
  </div>
</div></code>

結論

CSS を使用して列幅をオーバーライドし、親要素を利用することで、Bootstrap を使用して 7 列のレイアウトを作成できます。このアプローチには追加の CSS が必要であり、可能な限りネイティブの Bootstrap グリッド システムに従うことが常に望ましいことを覚えておいてください。

以上がブートストラップで 7 列のレイアウトを作成できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。