Twitter bootstrap 如何在引导4列上对齐内容底部
我有以下页脚代码:Twitter bootstrap 如何在引导4列上对齐内容底部,twitter-bootstrap,flexbox,bootstrap-4,twitter-bootstrap-4,Twitter Bootstrap,Flexbox,Bootstrap 4,Twitter Bootstrap 4,我有以下页脚代码: <div class="container"> <hr> <div class="row"> <div class="col-md-6"> © BusinessName 2017. </div> <div class="col-md-3"> <br> <a href="/blog"> Blog &l
<div class="container"> <hr>
<div class="row">
<div class="col-md-6">
© BusinessName 2017.
</div>
<div class="col-md-3"> <br>
<a href="/blog"> Blog </a> <br>
<a href="/blog"> FAQ </a> <br>
<a href="/blog"> About </a>
</div>
<div class="col-md-3">
<p><strong>Contact</strong> <br> contact@businessname.com <br> more info bla bla <br> more more more info</p>
</div>
</div> </div>
©BusinessName 2017。
联系
contact@businessname.com
更多信息bla bla
更多信息
我试图调整所有内容的底线,我已经尝试了一些事情,但没有工作。。。有什么好主意吗?您可以使用以下菜单中的
对齐项目结尾
©BusinessName 2017。
联系方式
contact@businessname.com
更多信息
更多信息
此外,自动边距在flexbox中工作。在那里,您可以使用mt auto
(页边空白顶部:auto)将列-*“推”到底部。行与列,检查它
对于整行中的所有列,请在行上使用对齐项目结束
<div class="row border align-items-end">
<div class="col">
A (row align-items-end)
<br/>
A<br/>
A<br/>
</div>
<div class="col">
B
</div>
<div class="col">
C
</div>
<div class="col">
D
</div>
</div>
这是最简洁、最漂亮的解决方案
<div class="row border align-items-end">
<div class="col">
A (row align-items-end)
<br/>
A<br/>
A<br/>
</div>
<div class="col">
B
</div>
<div class="col">
C
</div>
<div class="col">
D
</div>
</div>
<div class="row border">
<div class="col">
A
</div>
<div class="col">
B<br/>
B<br/>
B<br/>
</div>
<div class="col align-self-end">
C (col align-self-end)
</div>
<div class="col">
D
</div>
</div>