Bootstrapのリストの高さが揃わないのを解決する


twitter-bootstrap

Twitter Bootstrapで.thumbnailを使ってリスト表示していると文字数や画像サイズなどの関係で高さが違うリストが出てきてしまった場合にカラムが1つ落ちたりしてしまうことがあるので、その対策。

結論から言うと、自分で微調整してやるしかないっぽい。

下記の様にjQueryを読み込んだ上で.thumbnailの最大の高さに合わせるようにしたらきちんとそろった。

$(function() {

	function heightAdjust(obj) {
	    var maxHeight = 0;
	    obj.each(function() {
	        thisHeight = $(this).height();
	        if(thisHeight > maxHeight) {
	            maxHeight = thisHeight;
	        }
	    });
	    obj.each(function() { $(this).height(maxHeight); });
	}
	
	heightAdjust($(".thumbnail"));

});

「heightAdjust([揃えたい要素])」という風にしていけば大体応用きくと思います。

ただ要素が多いので、少しでもマシにしたい場合はforで回す方法に変えたほうがいいかも。

どんなフレームワークにせよ自動で思い通りにいくとは限らない・・・

コメントを残す

メールアドレスが公開されることはありません。