Bootstrap 用于在父容器底部定位 div 的间距实用程序 (mt-auto) 不起作用

Question

下面我有一个简单的例子，里面有一个“容器”和 2 个“行”div。我希望包含 <h1> 的第一个“行”像默认情况一样位于顶部。我希望包含 3 个特征“col”的第二个“行”位于容器的底部。我正在使用 Bootstrap 4.6

在下面的示例中，我使用了“mt-auto”实用程序，我希望它能正常工作，但似乎我做错了什么。我需要在 CSS 中指定一个“位置”吗？我需要指定其他 CSS 吗？作为参考，Bootstrap 4.6 间距文档位于此处：Bootstrap 4.6 Spacing Utility Documentation

我也尝试过使用“align-self-end”的 flex 方法，但似乎也不起作用。我需要在“行”或“容器”中添加“d-flex”吗？ Bootstrap 4.6 flex 文档供参考：Bootstrap 4.6 Flex Documentation

我已经尝试了各种方法并搜索了堆栈溢出，但我无法解决这个问题。对这两种方法之一的任何帮助将不胜感激。谢谢。

.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">

    <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>

Answer 1

您的 .container 未填充垂直 space，它需要 .h-100 以匹配父级高度。然后添加 .d-flex & .flex-column.

.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 h-100 d-flex flex-column">

    <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>

Bootstrap 用于在父容器底部定位 div 的间距实用程序 (mt-auto) 不起作用

Bootstrap Spacing Utility (mt-auto) for Positioning div at Bottom of parent Container Not Working

utility

spacing

twitter-bootstrap