这个问题在这里已有答案:
我有以下Bootstrap 4(.3.1)类的元素:
<footer class="container-fluid">
<div class="row">
<div class="col">
Copyright ©
</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可以使用它自己的类来实现这种开箱即用的方式?
除了将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 ©
</div>
<div class="col text-right">
<a class="">Back to top</a>
</div>
</div>
</footer>
您应该将高度添加到行。并使用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 ©
</div>
<div class="col text-right">
<a class="">Back to top</a>
</div>
</div>
</footer>