Question

对于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>的高度为100px，我希望cols的内容垂直位于元素的中心。

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

我是否必须将网格类全部废弃并使用flex类重新做一次？还是没有人知道Bootstrap可以使用自己的类来实现这种开箱即用的方式吗？

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

Answer 2

您应该在行中添加高度。并使用align-items-center垂直对齐flex-items，即col

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js" ></script>
<input type="button" onClick="deleteObj()" value="remove"/>
        <canvas id="canvas" width=400 height=400 style="height:500px;width:500px;"></canvas>

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

在Bootstrap 4网格列内垂直对齐内容的最佳方法是什么？

2 个答案: