Twitter Bootstarp3 Grid systemで行(row)の各列(col)の高さを同じにする。
Twitter Bootstarp3 のTableを利用して一覧画面をTableを作ってみたが、Desktop機では良いが、スマホで見る場合にはTableがスクロールするのでイマイチ使い勝手が良くない。 よくよく考えるとBootstarp3にはGrid systemがあるではないか!こういう時のためのGridだろうと、TableをやめてGridで組み直してみた。 なかなかよい感じだが、Bootstarp3 Grid systemで表のように組むと各CELLの高さが内容によって変わるためheightがバラついてしまう。 CSSで各CELLの高さをmin-height:200px等にすると、今度はスマホのときに表組みではなくなった時にCELL高さが高すぎる。もともとmin-heightも決められない。JSでセットできるだろうがちょっと面倒だ。 どうするのかとググってみるとやってる人がいた。サンプルまで付いている。 Bootstrap 3 responsive columns of same height おおー、うまく行った!