Bootstrapの概要は腐るほど情報があるのでそこらへんは省きます。

カラム数が12なのになぜかカラム落ちしてしまう原因

まずこの画像のレイアウトのように表示させたいとしましょう。

しかし、コンテンツの位置が下に落ちてしまう場合があります(逆もしかり)

僕の場合、その原因はCSSにありました。

コンテンツのCSSに余計なmarginが設定されていてそれが悪さをしていたというわけです。

Bootstrapはカラム数12で幅100%になるようになっているので、CSSにmarginが設定されていると、100%を超過してしまい、結果カラム落ちするというわけです。

位置を微調整したい場合は、グリッドの中にdiv等作成してその中にmarginを設定してあげればいいです。

また、<div>等余計な要素が片割だけ残っていたりしてもレイアウトが崩れる原因になりえます。

こういったカラム落ちが発生した場合の解決策として、ずれが生じたCSSにmargin等余計なものがないかの確認と、一旦インデントを整えて余計な要素がないか見返してみるといいかもしれません。

最後に

現在勉強がてらWebアプリを作成中なのですが、無機質なレイアウトのままやっているとさすがに気が滅入ってきたので、気分転換にBootstrapを導入してみました！

Bootstrapは最初とっつきにくいイメージがあったのですが、いざ使ってみるとサクッとレイアウトを整えられたのでとても便利だと思いました(小並感)