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

问题描述 投票:1回答:2

这个问题在这里已有答案:

我有以下Bootstrap 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>的高度是100px,我希望cols的内容可以位于元素的中心。

我已经尝试将d-flex align-items-center添加到元素(依次尝试容器,行和cols)但没有得到任何结果。

我是否必须一起废弃网格类并使用flex类重新执行此操作?或者有没有人知道Bootstrap可以使用它自己的类来实现这种开箱即用的方式?

html css twitter-bootstrap flexbox bootstrap-4
2个回答
2
投票

除了将d-flex align-items-center添加到footerflex-grow-1row类 - 请参阅下面的演示:

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>

0
投票

您应该将高度添加到行。并使用align-items-center垂直对齐flex-items i.n,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>
© www.soinside.com 2019 - 2024. All rights reserved.