Bootstrap固定响应式div高度：黑色div与图片等高适配需求咨询

嘿，我来帮你解决这个等高布局的问题！这里有几种实用的方法，既能让黑色div和图片保持一样的高度，还能完美适配不同屏幕尺寸：

方法1：利用Bootstrap原生Flex布局（推荐，适合Bootstrap 4+） #

首先要纠正一下你的HTML结构——Bootstrap的网格系统要求col必须放在row里面，不然会有布局偏移问题。然后我们可以用Bootstrap的flex工具类来实现等高效果：

<div class="row">
  <!-- 左侧图片列 -->
  <div class="col-md-8">
    <!-- img-fluid确保图片在小屏幕上响应式缩放，object-fit: cover保持图片比例（可选） -->
    <img src="你的图片地址.jpg" class="img-fluid" style="height: 800px; object-fit: cover;">
  </div>
  <!-- 右侧文本列 -->
  <div class="col-md-4 d-flex flex-column" style="background:#eee">
    <!-- flex-grow-1让黑色div占满父容器的剩余高度，自动和左侧图片等高 -->
    <div class="flex-grow-1" style="background:black; color: white; padding: 1rem;">
      这里是你的文本内容，不管内容多少，这个黑色div都会和左边图片一样高
    </div>
  </div>
</div>

原理说明： #

• d-flex把右侧的col-md-4变成flex容器
• flex-column让容器内的元素垂直排列
• flex-grow-1告诉黑色div“尽可能占满父容器的可用高度”，这样它就会自动匹配左侧图片的高度
• img-fluid保证图片在小屏幕上自动缩放，实现响应式适配

方法2：使用CSS Grid布局（更灵活的自定义方案） #

如果你需要更精细的布局控制，CSS Grid也是个很好的选择，尤其适合自定义列比例：

HTML代码： #

<div class="container">
  <div class="equal-height-grid">
    <div class="image-col">
      <img src="你的图片地址.jpg" style="height: 800px; width: 100%;">
    </div>
    <div class="text-col" style="background:#eee">
      <div style="background:black; color: white; height: 100%; padding: 1rem;">
        这里是你的文本内容，高度自动和图片一致
      </div>
    </div>
  </div>
</div>

CSS代码： #

.equal-height-grid {
  display: grid;
  /* 2fr:1fr对应Bootstrap col-md-8和col-md-4的比例（8/12 : 4/12 = 2:1） */
  grid-template-columns: 2fr 1fr;
  gap: 0; /* 去掉列之间的间隙，和Bootstrap默认一致 */
}

/* 响应式适配：小屏幕下自动堆叠成单列 */
@media (max-width: 767px) {
  .equal-height-grid {
    grid-template-columns: 1fr;
  }
}

原理说明： #

• Grid布局会让所有网格项自动等高，所以右侧的文本div只需要设置height:100%就能和左侧图片高度同步
• 媒体查询确保在屏幕宽度小于768px时，两列自动堆叠，符合响应式要求

方法3：Bootstrap 3兼容方案（旧项目适用） #

如果你还在使用Bootstrap 3，可以用官方提供的row-eq-height类来实现等高列：

<div class="row row-eq-height">
  <div class="col-md-8">
    <img src="你的图片地址.jpg" style="height: 800px; width: 100%;">
  </div>
  <div class="col-md-4" style="background:#eee">
    <div style="background:black; color: white; height: 100%; padding: 1rem;">
      这里是你的文本内容
    </div>
  </div>
</div>

注意事项： #

• Bootstrap 3的row-eq-height依赖Flexbox，需要引入对应的polyfill才能兼容旧浏览器（比如IE9及以下）
• 这种方法不如Flex/Grid灵活，优先推荐前两种现代方案

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