Bootstrap 4中如何用纯CSS让同行一列控制另一列高度？

当然可以实现！你想要的是让文本列（#column2）的高度完全跟着图片列（#column1）走，不能超过图片的高度——这和Bootstrap默认的「等高列」逻辑刚好反过来（默认是让矮的列拉伸到高列的高度）。下面给你两个纯CSS的实现方案，完美适配你的图片+文本场景：

方法1：Bootstrap Flex + 自定义高度锁 #

从Bootstrap 4开始，row本身就是flex容器，咱们可以通过调整flex属性精准控制高度：

<div class="d-flex flex-row" style="height: min-content;">
  <!-- 图片列：防止被压缩，高度由图片自身决定 -->
  <div id="column1" class="flex-shrink-0 col-md-6">
    <img src="你的图片路径" class="img-fluid" alt="图片描述">
  </div>
  <!-- 文本列：占满剩余宽度，高度锁死为图片列高度，超出部分滚动/隐藏 -->
  <div id="column2" class="flex-grow-1 col-md-6 p-3" style="height: 100%; overflow-y: auto;">
    <p>这里放你的描述文本，哪怕内容很长也不会超出图片列的高度，超出的部分会自动出现滚动条（如果不需要滚动，把overflow-y:auto改成overflow-y:hidden就行）</p>
  </div>
</div>

关键细节： #

• height: min-content：让flex容器的高度由子项中最矮的那个（也就是图片列）决定
• flex-shrink-0：确保图片列不会因为文本内容太多被压缩，保持自身的宽度和高度
• flex-grow-1：让文本列自动占据剩余的空间

方法2：CSS Grid + Bootstrap 布局类 #

如果觉得flex的方式不够直观，用CSS Grid能更精准地控制列的高度关联：

<div class="row" style="display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: min-content;">
  <div id="column1" class="col-md-6">
    <img src="你的图片路径" class="img-fluid" alt="图片描述">
  </div>
  <div id="column2" class="col-md-6 p-3" style="height: 100%; overflow-y: auto;">
    <p>这里放你的长描述文本，高度会被严格限制为图片列的高度，超出部分自动滚动</p>
  </div>
</div>

关键说明： #

• grid-template-columns: repeat(2, 1fr)：让两列平分宽度，你可以根据需求改成对应Bootstrap列的比例，比如3fr 9fr对应col-md-3和col-md-9
• grid-auto-rows: min-content：强制网格行的高度由内容最矮的列（也就是图片列）决定
• height:100% + overflow-y:auto：让文本填满整个网格单元格的高度，超出部分滚动（不需要滚动就换成overflow-y:hidden）

实用小技巧 #

如果你的图片加载有延迟，建议给图片列加一个最小高度，避免文本列在图片加载前高度塌陷：

#column1 {
  min-height: 200px; /* 根据你的图片平均高度调整数值 */
}

这样不管图片加载快慢，文本列的高度都会保持在合理范围内，不会出现布局跳动的问题。

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