Bootstrapのグリッドやコンポーネントが崩れるときの対処

グリッドはcontainer-row-colの入れ子が基本

Bootstrapのグリッドはcontainer（またはcontainer-fluid）の中にrow、そのrowの直下にcolを置く構造が前提です。この入れ子が崩れると、想定の余白や折り返しが効かなくなります。

よくある失敗は、rowを挟まずにcontainerの直下へcolを置く、あるいはcolの中に直接別のcolを入れてしまうケースです。colはrowの直接の子であるべきで、さらに分割したいときはcol内に新しいrowを作ってからcolを並べます。

rowには左右に負のマージンが設定されており、colの内側余白と相殺して整列します。rowを省略するとこの相殺が働かず、端がはみ出したり余白がずれたりします。

CSSとJSの読み込み順を確認する

BootstrapのCSSはhead内で、なるべく自前CSSより前に読み込みます。逆にしてしまうと自分の上書きがBootstrapに打ち消されることがあります。JSはbodyの閉じタグ直前に置くのが定石です。

ドロップダウンやモーダル、トグルなどの動的コンポーネントはJavaScriptに依存します。バージョン5系ではjQueryが不要になり、代わりにPopperを含むバンドルJSが必要なケースがあります。JSが読み込まれていない、または順序が誤っていると、これらが無反応になります。

症状別チェック表

Bootstrapのグリッドやコンポーネントが崩れるは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

バージョン差による違いに注意

Bootstrapは4系と5系でクラス名や仕様が変わっています。たとえば余白系のクラスで左右を表す接尾辞が変更され、フォーム関連のマークアップも見直されました。古いテンプレートを5系の読み込みで使うと崩れます。

また、data属性の名前も5系ではプレフィックスが付く形に変わっています。コピー元のサンプルと読み込んでいるBootstrapのバージョンが一致しているかを最初に確認してください。

崩れたときの切り分け手順

原因を順に潰していくと特定が早まります。

1. 読み込んでいるBootstrapのバージョンを確認する
2. CSSがhead内、JSがbody末尾にあり、自前CSSとの順序が正しいか見る
3. container-row-colの入れ子が崩れていないかHTMLを点検する
4. 動的コンポーネントが効かないならコンソールでJSエラーを確認する
5. サンプルコードのクラス名や属性名がバージョンに合っているか照合する

レビュー共有で崩れを見せ合う

Bootstrapの崩れは画面幅やブラウザによって出方が変わるため、文章だけでは伝わりにくいことがあります。実際の表示を関係者が同じ環境で見られると、原因の合意が早まります。

ギガサイト便にHTMLとCSS/JSをまとめたZIPをドロップすれば、その場で共有URLが発行され、CDNのエッジ配信で各自の端末から素早く確認できます。修正後は同じURLのままファイルを差し替えられるので、崩れ箇所の確認とレビューのやり取りを一つのリンクで完結できます。