引導程序3網格底部的CSS對齊元素

Question

我想在基於引導程序3的網格中將圖像或div相對於行底部對齊。我試圖用bottom: 0絕對定位元素，但似乎這不起作用，除非我專門爲父標記設置了一個width，我不喜歡這樣做。有沒有一種基於CSS的方式來將元素與底部對齊？這裏有一個完整的例子：

http://jsfiddle.net/uMTAN/

Answer 1

有一個CSSish方式做到這一點，但我不認爲你可以只用CSS做。您需要將父元素位置設置爲相對位置，然後您需要在該元素上設置高度，以便絕對定位的子元素將位於列容器的底部。不幸的是，高度的自然行爲不會強制容器達到父容器的高度。你會認爲height:100%;可以工作，但事實並非如此。

例如：

.col-xs-6 { 
    position: relative; 
    height: 322px; // this will most likely be dynamic via JavaScript 
} 

<div class="col-xs-6"> 
    <div style="position: absolute; bottom: 0px"> 
     <a href="/"> 
      <img width="200" height="200" src="http://placehold.it/200x200"> 
     </a> 
    </div> 
</div> 

但是如果內容向右繼續高度改變（這我假設它會），那麼你就必須動態地更新父容器的高度。