ホームページ > ウェブフロントエンド > CSSチュートリアル > ブートストラップで 7 列のグリッド システムを作成するには?

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

Barbara Streisand
リリース: 2024-11-04 19:43:01
オリジナル
480 人が閲覧しました

How to Create a 7-Column Grid System in Bootstrap?

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

課題

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

1

2

3

4

5

6

7

<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 列のグリッド システムを作成する方法を示しています。

1

2

3

4

5

6

7

8

9

10

11

<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 を使用して各列の幅が決定されます。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート