使用Bootstrap间距工具(mt-auto)将Div定位到父容器底部失效问题排查

嘿，我明白你的问题了！你已经尝试了mt-auto和align-self-end但没看到预期效果，核心原因是你的.container没有被设置为flex容器——Bootstrap的这些间距和flex对齐工具类，必须在flex布局的父容器下才能发挥作用。

下面给你两种可行的方案，都是基于Bootstrap 4.6自带的工具类，不用额外写大量自定义CSS：

方案一：用mt-auto配合flex容器（推荐） #

只需要给.container添加三个Bootstrap工具类：d-flex、flex-column、h-100，就能让mt-auto生效，把第二个row推到底部。这三个类的作用分别是：

• d-flex：将容器转换为flex布局
• flex-column：让子元素（两个row）垂直排列
• h-100：让container占满父元素.hero的全部高度，为mt-auto提供足够的空间实现“自动顶到底”的效果

修改后的完整代码：

.hero { height: 400px; background-color: #ccc; }
.row { border: 1px solid #999; }

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="hero">
  <div class="container d-flex flex-column h-100">
    <div class="row">
      <div class="col">
        <h1>Page Title</h1>
      </div>
    </div>
    <div class="row mt-auto">
      <div class="col"> Feature 1 </div>
      <div class="col"> Feature 2 </div>
      <div class="col"> Feature 3 </div>
    </div>
  </div>
</div>

方案二：用align-self-end配合flex容器 #

如果你更倾向于用align-self-end，同样需要先把.container设为flex垂直容器，然后给第二个row添加align-self-end类。这种方式下第一个row会默认顶在顶部，第二个row会贴到底部，效果和方案一完全一致：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="hero">
  <div class="container d-flex flex-column h-100">
    <div class="row">
      <div class="col">
        <h1>Page Title</h1>
      </div>
    </div>
    <div class="row align-self-end">
      <div class="col"> Feature 1 </div>
      <div class="col"> Feature 2 </div>
      <div class="col"> Feature 3 </div>
    </div>
  </div>
</div>

为什么之前的方法无效？ #

原来的.container是默认的块级元素，在块级布局里，mt-auto无法让元素自动对齐到底部；而align-self-end是flex布局专属的对齐属性，只有当父元素是flex容器时，这个类才会生效。只要把container转为flex垂直容器，这两种方法都能正常工作。

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