引导基于内容的大小调整答案

【问题标题】：Bootstrap well sizing based on content引导基于内容的大小调整
【发布时间】：2017-11-14 03:06:15
【问题描述】：

我正在使用引导井来表示可以由客户订购的餐点。当餐标题太长时，它会创建不同大小的井。有没有办法说“拿这个地区最大的井的比例，让别人和这个一样大”。如果可能的话，我正在寻找一些已经在引导程序中实现的非痛苦方式。

【问题讨论】：

您实际上是在 Bootstrap 中要求 等高列，这在之前已经被问过。除此之外，您似乎必须将数字和订单按钮放置在所述列的底部。
请在每个帖子中只问一个明确定义的问题。您关于强调文字的问题应单独发布。
@hungerstar 好的，看起来不错。我想我会试一试。谢谢。

标签： jquery css asp.net twitter-bootstrap

【解决方案1】：

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

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

【讨论】：

在 Bootstrap 4 中，您可以使用 card group 或 card deck 来实现此目的。

【解决方案2】：

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

【讨论】：