在 Bootstrap 4 网格列中垂直对齐内容的最佳方法是什么？ [复制]答案

【问题标题】：What's the best way to vertically align content within Bootstrap 4 grid columns? [duplicate]在 Bootstrap 4 网格列中垂直对齐内容的最佳方法是什么？ [复制]
【发布时间】：2019-03-02 19:16:03
【问题描述】：

我在 Bootsrap 4(.3.1) 类中有以下元素：

  <footer class="container-fluid">
    <div class="row">
      <div class="col">
        Copyright &copy;
      </div>
      <div class="col text-right">
        <a class="">Back to top</a>
      </div>
    </div>
  </footer>

<footer> 的高度是 100 像素，我希望列的内容垂直位于元素的中心。

我尝试将d-flex align-items-center 添加到元素中（依次尝试容器、行和列），但没有得到任何结果。

我是否必须将网格类全部废弃并使用 flex 类重新执行此操作？或者有没有人知道 Bootstrap 可以使用它自己的类来实现这个开箱即用的方法？

【问题讨论】：

标签： html css twitter-bootstrap flexbox bootstrap-4

【解决方案1】：

除了将d-flex align-items-center 添加到footer 和flex-grow-1 到row 类之外 - 请参见下面的演示：

footer {
  height: 100px;
  border: 1px solid;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

<footer class="container-fluid d-flex align-items-center">
  <div class="row flex-grow-1">
    <div class="col">
      Copyright &copy;
    </div>
    <div class="col text-right">
      <a class="">Back to top</a>
    </div>
  </div>
</footer>

【讨论】：

【解决方案2】：

您应该将高度添加到行。并使用 align-items-center 来对齐弹性项目，即 col

.footer {
  height: 100px;
  background: #dedede;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
 <footer class=" container-fluid">
    <div class="footer row align-items-center justify-content-center">
      <div class="col">
        Copyright &copy;
      </div>
      <div class="col text-right">
        <a class="">Back to top</a>
      </div>
    </div>
  </footer>

【讨论】：