基于内容的Bootstrap大小调整

Question

我正在使用自助井来代表客户可以订购的食物。当膳食标题太长时，会产生不同大小的水井。有没有办法怎么说“拿这个区域最大的比例，让其他人像这个一样大”。我正在寻找一些已经在bootstrap中实现的非痛苦的方法。

Answer 1

我不知道如何在内置到bootstrap 3中的方法，但我已经使用这个jquery插件来匹配高度。 https://github.com/liabru/jquery-match-height

Flexbox也可能是您的另一个选择，因为它现在拥有出色的浏览器支持。

Answer 2

在bootstrap 3中，最好的方法是通过JS。下面是一个非常容易使用的jQuery均衡函数。要使用下面的代码，您只需添加类＆＃34;均衡＆＃34;对于要均匀设置其高度的每个项目。然后在所有那些＆＃34; equize＆＃34;的父div中课程，给父母一个＆＃34;均衡组＆＃34;。 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();
});