コンテンツに基づいたブートストラップウェルサイジング

Question

私はブートストラップウェルを使用して、顧客が注文できる食事を表現しています。食事のタイトルが長すぎると、異なるサイズのウェルが作成されます。 「この分野で最大の優位性を持ち、他のものをこのように大きくする」という言い方がありますか？可能であれば、すでにブートストラップで実装されている、いくつか非痛みを伴う方法を探しています。

Answer 1

は私が右のブートストラップ3に内蔵されてこれを行う方法を知りませんが、私は高さを一致させるために、このjQueryプラグインを使用していました。 https://github.com/liabru/jquery-match-height。

フレックスボックスは、今すぐ素晴らしいブラウザサポートがあるので、あなたのための別のオプションかもしれません。

Answer 2

ブートストラップ3では、これを行う最も良い方法はJSです。以下は、かなり使いやすいjQueryイコライズ関数です。以下のコードを使用するには、高さを均等に設定する各項目にクラス「イコライズ」を追加するだけです。次に、すべてのそれらの "イコライズ"クラスの親divで、親に "equalized-group"のクラスを与えます。以下Codepen例：

https://codepen.io/ymeiner/pen/NdKPLj

equalize = function() { 
    $('.equalized-group').each(function() { 
    var maxHeight = 0; 
    $(this).find('.equalized').height('auto'); 
    $(this).find('.equalized').each(function() { 
     if (maxHeight < $(this).height()) maxHeight = $(this).height(); 
    }); 
    $(this).find('.equalized').each(function() { 
     $(this).height(maxHeight); 
    }); 
    }); 
} 
$(window).resize(function() { 
    equalize(); 
}); 
$(window).load(function() { 
    equalize(); 
});