垂直對齊底部不工作在表格單元

Question

我有一個引導行的div。我想垂直對齊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> 

爲什麼不工作的代碼？

Answer 1

請參考代碼：

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

Answer 2

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

https://jsfiddle.net/mjaty6u7/