引导程序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> 

但是如果内容向右继续高度改变（这我假设它会），那么你就必须动态地更新父容器的高度。