如何让 Bootstrap 在中心对齐一行，在底部对齐一行？答案

【问题标题】：How do I get Bootstrap to align one row in the center and one at the bottom?如何让 Bootstrap 在中心对齐一行，在底部对齐一行？
【发布时间】：2021-04-11 00:24:42
【问题描述】：

我有一段 vh-100，有一个容器和两排。我试图让一行包含 2 个cols（标题、图像和下拉菜单）垂直对齐到容器的中间，另一行（i 标签）垂直对齐到底部。但是，这似乎不起作用。我曾尝试使用 Bootstrap 的 mt-auto 和 flex-column，但似乎都不起作用，我确信我的代码可能有问题，我将其附加在下面：

  <section class="landing min-vh-100 d-flex align-items-center" id="landing">
<div class="container">

  <div class="row"> #ROW 1 (to be vertically centered)
    <div class="col-md-7 my-auto">
      <h1 class="text-white display-3 mb-4">Text</h1>
      <h3 class="text-white mb-4" id="example">Subtext</h3>
      <div class="btn-group mr-1">
        <button type="button" class="btn btn-lg btn-dark rounded-0 dropdown-toggle" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
          Dropdown Menu
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Dropdown 1</a>
          <a class="dropdown-item" href="#">Dropdown 2</a>
        </div>
      </div>
      <a href="#" target="_blank" class="text-white font-weight-bold btn-lg">Link</a>
    </div>
    <div class="col-md-5 my-auto"><img src="#" class="img-fluid" alt=""></div>
  </div>

  <div class="row mt-auto"> #ROW 2 (to be vertically aligned to bottom)
    <a href="#" class="pt-3 mx-auto"><i class="fas fa-chevron-circle-down text-light"></i></a>
  </div>
</div>

我的猜测是，由于 section 标签上的 align-items-center，这些行可能居中。我尝试在第 1 行使用my-auto，在第 2 行使用mt-auto，但无济于事。如果有人能帮我解决这个问题，我将不胜感激。

【问题讨论】：

对你的问题很困惑，介意告诉我下拉菜单应该在哪里吗？第 1 行还是第 2 行？
是的，很抱歉。第 1 行包含 2 个列（一个列具有 h1、h3 和下拉菜单，另一个列包含图像）。我的目标是让第二行的 i 标签与容器底部对齐，第一行与中心对齐。使主要问题和代码更加清晰。

标签： html bootstrap-4 flexbox row

【解决方案1】：

已编辑：

为你的行创建一个 id 并编写一个 css

 #row1 .container{
  display: flex;
  flex-direction: row;
}

我在你的第一行添加了容器类，在第二行我添加了

align-text-bottom

在你的课堂上。

https://jsfiddle.net/Vaulient/j8otzcve/35/

【讨论】：

感谢您的提琴。很抱歉一开始没有说清楚。我对第一个 col 垂直居中没有问题（即使用 h1、h2 和下拉菜单）。我的问题是将第二行垂直对齐到页面底部。为了更清楚起见，我已将我的目标的图形说明附加到主要问题中。
我已经更新了 js fiddle。希望它能解决你的问题。我也更新了答案。
编辑我的答案时，我忘了更新小提琴链接。链接已更新。

【解决方案2】：

您可以直接导入：class="col-md-7 my-auto" --> class="col-md-12 my-auto justify-content-center" 和

class="col-md-5 my-auto" --> class="col-md-12 my-auto justify-content-center"

【讨论】：

【解决方案3】：

您是否使用过align-middle 和align-bottom？我认为它简短易懂。

【讨论】：

我尝试将这些类应用于行，但不幸的是它们不起作用。
您是否以正确的方式应用了这些课程？
我从section标签中删除了align-items-center，因为我认为它们会与之冲突，然后我将align-middle标签应用于第一个row和align-bottom标签到第二个row。如果我没有正确理解，请道歉，因为我对此比较陌生。
你的家长班有身高吗？如果你的课程没有高度，它什么也做不了。