2

以下の様なよくあるサンプルだと、添付イメージ1のように、各カラムの高さが同一に書かれる事が多いと思います。

<div class="row">
    <div class="col-md-12">ヘッダー</div>
</div>
<div class="row">
    <div class="col-md-2">メニュー</div>
    <div class="col-md-8">内容</div>
    <div class="col-md-2">広告とか</div>
</div>
<div class="row">
    <div class="col-md-12">フッター</div>
</div>

実際にページを作っていくと、普通は各カラムの高さは異なるので、イメージの2のようにそれぞれ段違いになると思います。
しかし、背景色やイメージを使う場合、高さが揃わないと締まりがありません。

よくある「ボックスの高さをそろえるjQuery」を使いまして、3のようにひとまず高さをそろえることはできたのです。
が、しかし。

ブラウザの幅を縮めて縦配置になった時に、各カラムの幅が同じなので、4のようにメニューのカラムなどの余白が残ってしまい残念なレイアウトになってしまいます。

縦配置の時は5のようにカラムの内容に合わせて、
横配置の時だけ3のように揃える方法はないものでしょうか。

レイアウトの例

1 件の回答 1

2

ちょうど「ウィンドウ幅が一定以上の時だけ高さを揃える」機能を持ったプラグインがあるようです。

レスポンシブWebデザインに対応した「jquery.heightLine.js」 - to-R

余談ですが、display: table-cell で高さを揃えた横並びにしておいて、MediaQueryで切り替えるようにすれば、CSSだけでもできそうです。(Bootstrapのカラムは float を使っているので、だいぶ手法が変わってしまいますが)

1
  • お返事が大変遅くなりまして申し訳ありません。 そういうプラグインもあったのですね。 実際のサイトでは幅によって3カラムと2カラムとスマホ表示の3段階なので、ちょっと適合しないかもですが、CSSのほうも参考にさせていただきます。 ありがとうございました。 Commented 2015年4月9日 21:40

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。