Bootstrapでカラム落ちする原因と対処法を解説!

この記事ではBootstrapでカラム落ちしたときの原因と対処法を解説していきます。Bootstrapではカラム数12個以上を超えてしまったり、基本の形が出来ていないとカラム落ちしてしまいます。この原因と対処法を解説していきます。

コンテンツ [表示]

  1. 1カラム落ちとは
  2. 2Bootstrapでカラム落ちする原因と対処法
  3. 2.1Bootstrapのカラム数の合計が12個以上になっている
  4. 2.2カラム数を12個以上にしたい場合
  5. 2.3containerの外に
  6. 3まとめ

カラム落ちとは

カラム落ちとは、本来一列で表示するはずのレイアウトが段落ちしてしまう現象であったり、次の新しい列に折り返される現象のことです。

下記のサンプルコードを見てみましょう。

このように1列にならず、新しい列に落ちてしまう事をカラム落ちといいます。

このような現象が起きた際の原因と対処法を次章で解説していきます。

Bootstrapでカラム落ちする原因と対処法

Bootstrapでカラム落ちする原因と対処法を2つ紹介していきます。

Bootstrapのカラム数の合計が12個以上になっている

Bootstrapでカラム落ちする原因はカラム数が12個以上になってしまうことが原因です。

1つの行に12個以上の列が配置されている場合、インデントが崩れるので、余分な列の各グループは1つの単位として新しい列に折り返されます。

下記のサンプルコードを見てみましょう。

12個のボックスがあり一つの列になっていると思います。
 

次はボックスを12個から13個に増やしてみると、一つの列にはまとまらず新しい列に折り返されてしまいました。

Bootstrapは一つの列に、合計12個までしかカラムが入らない特徴があります。

対処法

カラム落ちした例のようにカラムの数は12を超えると絡む落ちします。

つまり、カラム落ちしない範囲で最大数のカラム数12に収めるためには

  • col数1×12
  • col数2×6
  • col数3×4
  • col数6×2
  • col数12
のようなカラムの組み合わせでカラム数が12を超えないような組み合わせにしましょう。
 

カラム数を12個以上にしたい場合

カラム数を12個以上にしたい場合はflex-nowrapを使います。nowrap属性は文字を自動的に
改行しないようにするための属性です。

flex-nowrap属性を付ける事で改行する事なくカラム数を12個以上とし、スクロール表示にすることが出来ます。

no-wrap

<div class="d-flex flex-nowrap">
…
</div>

containerの外に

Bootstrapでは、rowクラスでcolを囲む事によって12個boxができます。

下記のサンプルコードではrowクラスの中にcolが入っておらず、conteinerの中にcolが入っており、この場合だとrow(行)の指定がされていないので縦1列に並びます。

下記のサンプルコードを見て下さい。

対処法

HTML

<body>
  <div class="container">
    <div class="row">
      <div class="box1 col-3">
        1
      </div>    
    </div>
  </div>
</body>

Bootstrapのグリッドシステムでは、container要素、container-fluid要素の外にcolを指定してしまうとカラム落ちしてしまうので、container要素の中にrowクラスを定義し、colを配置するとカラム落ちせずに正しい画面幅で表示をしてくれます。

これらの点を踏まえると、今ご覧のなられている方に起こっているカラム落ちする原因はcol数の合計が12個以上になっている、もしくはbootstrapの基本の型であるconteinerrowcolが出来ていない可能性もあります。

もう一度よく、自分自身のコードを確認してみましょう。
 

まとめ

いかがだったでしょうか?Bootstorapでカラム落ちした際は是非この記事の対処法を試してみて下さい。

 

GeekHive採用サイト

関連記事