如何让同一row中两个Jumbotron响应式匹配最高高度？

嘿，我来帮你搞定这个两个Jumbotron高度不匹配的问题！针对你的场景，这里有两种靠谱的解决方案，比你之前尝试的jQuery写法更省心或者更容易调试：

方法1：用Bootstrap原生Flexbox特性（首推） #

Bootstrap 4及以上版本的.row本身就是Flex容器，我们可以直接利用Flex的特性让列内的Jumbotron自动填满高度，完全不用写JS：

操作步骤： #

• 给每个.col-*元素添加d-flex类，把列变成Flex容器
• 给Jumbotron添加flex-grow-1类，让它自动填充列的可用高度

修改后的完整代码如下：

<div class="row">
  {% if project.has_member_responses %}
    <div class="col-8 d-flex">
      <div class="jumbotron greenback box-shad flex-grow-1">
        <h4>Welcome to the Project test "{{ project.name }}" Detail page</h4>
      </div>
    </div>
    <div class="col-4 d-flex">
      <div class="jumbotron doughnut greenback score-box box-shad flex-grow-1">
        <div class="score-title">
          <h4>Team Score</h4>
        </div>
        <div class="chart" data-percent="66">
          <div class="score-text">
            <span>77</span>
          </div>
        </div>
      </div>
    </div>
  {% endif %}
</div>

这个方案是响应式的，窗口大小变化时会自动重新调整高度，完全不用操心。

方法2：修复你的jQuery代码（如果一定要用JS实现） #

你之前的jQuery没生效，大概率是代码执行时机不对（比如DOM还没加载完就跑了）或者选择器有问题。下面是一个能稳定运行的写法：

// 等DOM完全加载完毕再执行代码
$(document).ready(function() {
  // 封装同步高度的函数
  function syncJumbotronHeights() {
    let maxHeight = 0;
    // 遍历所有需要同步的Jumbotron
    $('.row .jumbotron').each(function() {
      // 先重置高度为auto，避免旧高度干扰
      $(this).height('auto');
      // 获取当前元素的实际高度
      const currentHeight = $(this).outerHeight();
      // 更新最大高度值
      if (currentHeight > maxHeight) {
        maxHeight = currentHeight;
      }
    });
    // 把所有Jumbotron设置为最大高度
    $('.row .jumbotron').height(maxHeight);
  }

  // 页面加载完成后执行一次
  syncJumbotronHeights();

  // 窗口大小改变时重新同步，保证响应式
  $(window).resize(function() {
    syncJumbotronHeights();
  });
});

注意事项： #

• 确保你已经正确引入了jQuery库，且这段代码在jQuery之后加载
• 如果你的Jumbotron是动态渲染出来的（比如模板渲染完成后才出现），要确保代码在DOM渲染完成后再执行（比如放在$(document).ready里，或者在模板渲染完成后手动调用syncJumbotronHeights()）

为什么首推纯CSS方案？ #

纯CSS方案不需要额外的JS代码，性能更好，而且Bootstrap的Flex类就是为这类布局场景设计的，兼容性拉满（支持所有现代浏览器和IE10+），后期维护也更简单。

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