实现段落等高显示的技术问询（附Bootstrap代码片段）

嘿，我明白你现在遇到的问题——用Bootstrap 3做的缩略图布局里，每个卡片的段落高度不一样，导致整个排版看起来乱糟糟的对吧？别担心，给你两种靠谱的实现方案，按需选就行：

方法一：Flexbox布局（推荐，简洁高效） #

Bootstrap 3本身没默认用Flexbox，但我们可以自己加几行CSS搞定，这也是现在最流行的解决方案，浏览器支持也很好。

首先，给你的缩略图容器加个自定义类，比如flex-thumbnails：

<ul class="thumbnails list-inline flex-thumbnails">

然后添加这段自定义CSS：

.flex-thumbnails {
  display: flex;
  flex-wrap: wrap;
}

.flex-thumbnails .thumbnail {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 假设你的段落放在.caption里，让它自动填充剩余空间 */
.flex-thumbnails .thumbnail .caption {
  flex-grow: 1;
}

原理很简单：让每个缩略图卡片都占满父列的高度，然后把段落所在的容器设为自动拉伸，这样不管内容多少，所有段落区域都会统一高度，完美对齐。

方法二：jQuery动态计算高度（兼容旧浏览器） #

如果需要兼容那些不支持Flexbox的老浏览器（比如IE9及以下），可以用jQuery来动态计算并设置高度：

直接在页面里加这段脚本：

$(document).ready(function() {
  // 替换成你实际的段落选择器，比如.thumbnail p或者.caption .content
  var $targetElements = $('.thumbnail p');
  let maxHeight = 0;

  // 先遍历一遍，找出最高的那个元素高度
  $targetElements.each(function() {
    const currentHeight = $(this).height();
    if (currentHeight > maxHeight) {
      maxHeight = currentHeight;
    }
  });

  // 给所有元素设置这个最高高度
  $targetElements.height(maxHeight);

  // 窗口大小改变时重新计算，保证响应式效果
  $(window).resize(function() {
    maxHeight = 0;
    // 先重置高度，避免之前的高度影响计算
    $targetElements.height('auto');
    $targetElements.each(function() {
      const currentHeight = $(this).height();
      if (currentHeight > maxHeight) {
        maxHeight = currentHeight;
      }
    });
    $targetElements.height(maxHeight);
  });
});

小优化 #

如果觉得窗口resize时触发太频繁，可以加个防抖函数：

let resizeTimer;
$(window).resize(function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    // 上面的重新计算代码
    maxHeight = 0;
    $targetElements.height('auto');
    $targetElements.each(function() {
      const currentHeight = $(this).height();
      if (currentHeight > maxHeight) {
        maxHeight = currentHeight;
      }
    });
    $targetElements.height(maxHeight);
  }, 250); // 250毫秒延迟，避免频繁计算
});

内容的提问来源于stack exchange，提问作者duke_sastry