基于内容的自举尺寸调整

Question

我使用引导井来代表客户可以订购的膳食。当餐饮标题太长时，会产生不同大小的水井。有没有办法如何说“把这个地区最大的井的比例，并使其他人这样大”。如果可能的话，我正在寻找一些已经在bootstrap中实施的非痛苦方式。

Answer 1

我不知道的方式做到这一点直接内置自举3，但我已经使用这个jQuery插件相匹配的高度。 https://github.com/liabru/jquery-match-height。

因为它现在有很好的浏览器支持，所以Flexbox也可以成为您的另一种选择。

Answer 2

在bootstrap 3中，最好的方法是通过JS。下面是一个非常容易使用的jQuery均衡功能。要使用下面的代码，只需将“equalize”类添加到要均匀设置其高度的每个项目。然后在所有这些“均等”类的父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(); 
});