Bootstrap 4 Flexbox：如何让列内行填充父列垂直空间？

嘿，这个场景我太熟悉了！用Bootstrap 4的内置Flexbox辅助类就能轻松搞定，完全不用写额外的自定义CSS，效率拉满。下面给你一步步拆解实现方法：

核心思路 #

要让右侧列的内容容器无论条目多少都填满垂直空间，关键是把右侧列变成垂直方向的Flex容器，然后让内容区域自动占据剩余空间。

代码实现示例 #

先给你一个完整的布局结构，关键部分我标了注释：

<!-- 确保父容器有明确高度，这里用视口高度100vh作为示例 -->
<div class="container h-100">
  <!-- 外层行设为h-100，占满父容器高度 -->
  <div class="row h-100">
    <!-- 左侧视频列 -->
    <div class="col-md-8">
      <div class="embed-responsive embed-responsive-16by9 bg-dark">
        <!-- 替换成你的视频播放器 -->
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
      </div>
    </div>

    <!-- 右侧内容列：核心是d-flex flex-column把它变成垂直Flex容器 -->
    <div class="col-md-4 d-flex flex-column border">
      <!-- 内容容器：flex-grow-1让它填满列的剩余垂直空间 -->
      <div class="flex-grow-1 overflow-y-auto p-2">
        <!-- 带缩略图和标题的行 -->
        <div class="row mb-3 align-items-center">
          <div class="col-4">
            <img src="https://via.placeholder.com/120x80" class="img-fluid rounded">
          </div>
          <div class="col-8">
            <h6 class="mb-0">视频标题1</h6>
            <small class="text-muted">10分钟前</small>
          </div>
        </div>
        <div class="row mb-3 align-items-center">
          <div class="col-4">
            <img src="https://via.placeholder.com/120x80" class="img-fluid rounded">
          </div>
          <div class="col-8">
            <h6 class="mb-0">视频标题2</h6>
            <small class="text-muted">20分钟前</small>
          </div>
        </div>
        <!-- 可以添加更多行，内容超过高度会自动出现滚动条 -->
      </div>

      <!-- 可选：底部固定元素，用mt-auto自动推到底部 -->
      <div class="p-2 border-top">
        <button class="btn btn-sm btn-primary w-100">加载更多视频</button>
      </div>
    </div>
  </div>
</div>

关键类说明 #

我把几个核心的Bootstrap辅助类给你解释清楚：

• h-100：设置元素高度为100%，确保外层行和容器能占满可用高度（如果父容器是body，记得给html, body也加height: 100%的基础CSS）
• d-flex flex-column：把右侧列转换成垂直方向的Flex容器，让内部元素可以垂直分配空间
• flex-grow-1：让内容容器自动占据列里的剩余垂直空间，不管里面有多少条目，都会撑满整个列的高度
• overflow-y-auto：如果内容太多超出高度，自动显示垂直滚动条，避免布局溢出
• mt-auto：给底部元素自动添加margin-top，把它推到列的最底部，和上面的内容区域完美分隔

额外注意事项 #

如果你的布局不是全屏高度，而是嵌套在某个有固定高度的容器里，只需要把最外层的h-100换成对应容器的高度类（比如h-75）或者自定义高度即可，核心逻辑是一样的。

这种方式完全利用Bootstrap 4的内置工具类，是最符合框架设计的高效实现，不用额外写一行自定义Flexbox CSS，维护起来也方便。

内容的提问来源于stack exchange，提问作者J. Patrick Moran