Bootstrapでカラム落ちする原因と対処法を解説!
この記事ではBootstrapでカラム落ちしたときの原因と対処法を解説していきます。Bootstrapではカラム数12個以上を超えてしまったり、基本の形が出来ていないとカラム落ちしてしまいます。この原因と対処法を解説していきます。
カラム落ちとは
カラム落ちとは、本来一列で表示するはずのレイアウトが段落ちしてしまう現象であったり、次の新しい列に折り返される現象のことです。
下記のサンプルコードを見てみましょう。
このように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個以上にしたい場合は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の基本の型であるconteiner
→row
→col
が出来ていない可能性もあります。
もう一度よく、自分自身のコードを確認してみましょう。
まとめ
いかがだったでしょうか?Bootstorapでカラム落ちした際は是非この記事の対処法を試してみて下さい。