

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

[code]

    <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>
    
[/code]

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

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

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

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

![レイアウトの例](https://i.stack.imgur.com/CblQL.png)


CC BY-SA 3.0
2015-03-13T23:33:34.743
7895
2020-10-10T11:03:44.143
2020-10-10T11:03:44.143
32986
8145
question
jquery css twitter-bootstrap
Twitter Bootstrapで、横並びのカラムの高さを「レスポンシブ的に」揃えたい


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

[レスポンシブWebデザインに対応した「jquery.heightLine.js」 -
to-R](http://blog.webcreativepark.net/2013/10/21-112000.html)

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


CC BY-SA 3.0
2015-03-15T08:41:04.950
7933
2015-03-15T08:41:04.950
8000
7895
answer