ブートストラップで 7 つの等しい列を作成するには?

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

ブートストラップでは、列の作成は簡単ですが、あまり一般的ではない列構成を実現する方法は必ずしも明らかではありません。

CSS メディア クエリによる列幅のオーバーライド

7 つの等しい列を実現するには、CSS メディアを使用してブートストラップの列のデフォルト幅をオーバーライドする必要があります。クエリ。方法は次のとおりです。

1. 行コンテナーに「seven-cols」などのカスタム クラスを作成します。
2. CSS メディア クエリを使用して、その行内の個々の列の幅を設定します。コンテナ。

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

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

列幅の計算:

幅は次を使用して計算されます。式:

width = 100% / 7 column-number

この場合、7 つの列:

width = 100% / 7 = 14.285714285714285714285714285714%

これは、各列を親行コンテナーの 14.285714285714285714285714285714% に設定する必要があることを意味します。

HTML マークアップ:

<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>

動作デモ:

jsbin 上の動作デモをチェックして、7 つの等しい列が動作しているのを確認してください:
https://jsbin.com/vuvut/3/edit?css,output

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