ブートストラップで 7 つの等しい列を作成するには?-CSSチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-11-01 14:59:28

オリジナル

573 人が閲覧しました

How to Create Seven Equal Columns in Bootstrap?

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

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

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

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

行コンテナーに「seven-cols」などのカスタムクラスを作成します。
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 サイトの他の関連記事を参照してください。