我有一个div,它是一个bootstrap行。我想垂直对齐div的底部,但它仍然与行div的顶部对齐。
代码:
<div class="row" style="height:100%;">
<div class="col-xs-12" style="height:100%;display:table-cell;vertical-align: bottom;">
<h4 style="color:#FFF;vertical-align: bottom;">*Stuff like restaurants, meat alternatives, dairy alternatives, and much more!</h4>
</div>
</div>
为什么这段代码不起作用?
答案 0 :(得分:2)
请参阅代码:
<div class="row">
<div class="col-xs-12" style="display:table;">
<h4 style="color:#000; display: table-cell; vertical-align: bottom;">*Stuff like restaurants, meat alternatives, dairy alternatives, and much more!</h4>
</div>
答案 1 :(得分:0)
将display:table
添加到父div.row
还添加了身体和html高度100%;
<div class="row" style="height:100%; display: table;">
<div class="col-xs-12" style="height:100%;display:table-cell;vertical-align: bottom;">
<h4 style="color:#FFF;vertical-align: bottom;">*Stuff like restaurants, meat alternatives, dairy alternatives, and much more!</h4>
</div>
</div>