ブートストラップで 7 列のグリッド システムを作成するには?

Bootstrap で 7 つの等しい列を取得する

課題

Bootstrap のデフォルトの列システムが 12 であることを考えると、Bootstrap で 7 つの等しい列を取得するのは難しい場合があります。列。次のコード スニペットは、Bootstrap の組み込み列クラスを使用して 5 つの等しい列を作成する試みを示しています。

<code class="html"><div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div></code>

ただし、これにより、必要な 7 列ではなく 5 列のみになります。

カスタマイズ列幅

この制限を克服するには、CSS3 @media クエリを使用してデフォルトの列幅をオーバーライドする必要があります。必要な列数に基づいて列の幅プロパティをカスタマイズすると、目的の効果が得られます。

コードの実装

次のコードは、ブートストラップで 7 列のグリッド システムを作成する方法を示しています。

<code class="html"><div class="container">
  <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>
</div></code>

標準のブートストラップ行と区別するために、7 列のクラスが外側の行に追加されます。

その後、カスタム CSS を使用して各列の幅が決定されます。

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

@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%;
  }
}

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

幅の値 14.285714285714285714285714285714% は、100% を 7 (列数) で割って、列番号 (この場合は 1) を掛けることで得られます。この計算により、すべての列の幅が均等になることが保証されます。

カスタム CSS と 7 列クラスを組み合わせることで、異なる画面サイズに適応する 7 つの等しい列を持つ柔軟なグリッド システムを作成できます。

以上がブートストラップで 7 列のグリッド システムを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。