Bootstrap 4中如何让行或列在父容器内扩展至全屏高度？以及如何将文章标签行固定在父列底部

嘿，我来帮你搞定这两个Bootstrap 4的布局问题，咱们一步步拆解解决！

Bootstrap 4的flex布局体系可以轻松实现这个需求，核心是利用原生的高度类和flex类：

• 首先确保父容器有明确的高度：如果要让元素占满浏览器窗口，记得给html、body和最外层容器都加上h-100类；如果是自定义高度的父容器，直接给它设置高度即可；
• 给目标行（.row）添加h-100类，让它完全填满父容器的高度；
• 如果需要列也填满行的高度，给对应的.col-*列添加h-100，同时可以结合d-flex flex-column让列内的子元素支持垂直方向的flex布局。

之前你遇到的标签跑到页面底部甚至下一行内容里的问题，是因为错误地让中间列（col-9）占满了全屏高度，脱离了父行的高度限制。正确的做法是让col-9和左侧缩略图列保持等高，同时在col-9内部用flex布局把标签推到底部：

先修正你基础代码里的引号闭合问题，再调整布局类：

<div class='row mb-3 align-items-stretch'> <!-- 强制两个列等高，和缩略图保持一致 -->
  <div class='col-3'>
    [ thumbnail image goes here ]
  </div>
  <div class="col-9 d-flex flex-column"> <!-- 开启垂直方向的flex布局 -->
    <div class='row'>
      <div class='col-12'>Article title</div>
    </div>
    <div class='row'>
      <div class='col-12'>Article excerpt: 这里是长度不固定的摘要内容，不管内容多长，标签都会稳稳待在底部</div>
    </div>
    <div class='row mt-auto'> <!-- mt-auto 自动将元素推至容器底部 -->
      <div class='col-12'>Tags: tag1, tag2, tag3</div>
    </div>
  </div>
</div>

关键要点说明：

• align-items-stretch：给最外层的row加这个类，能让col-3和col-9自动保持相同高度，完美匹配缩略图的高度；
• d-flex flex-column：给col-9添加这两个类，让列内的三个row变成垂直flex容器，子元素可以灵活调整位置；
• mt-auto：给标签所在的row加这个类，它会自动占据上方所有剩余空间，把标签行牢牢推到col-9的底部，不管摘要内容长短都不会错位；
• 绝对不要给col-9加h-100这类全屏高度的类，这就是之前布局异常的根源——它会让col-9脱离父行的高度约束，直接撑满整个窗口高度。

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