CSS对齐Bootstrap 3网格底部的元素

Question

我想在基于Bootstrap 3的网格中将图像或div相对于行的底部对齐。我已尝试使用bottom: 0对元素进行绝对定位，但看起来除非我专门为父标记设置width，否则这不起作用，我不想这样做。是否有基于CSS的方法将元素对齐到底部？这是一个完整的例子：

http://jsfiddle.net/uMTAN/

Answer 1

有一种CSSish方式可以做到这一点，但我不认为你只能使用CSS。您需要将父元素位置设置为relative，然后您需要在该元素上设置高度，以便绝对定位的子元素将位于列容器的底部。不幸的是，高度的自然行为不会迫使容器达到父容器的高度。你会认为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>

但是如果右边的内容继续改变高度（我假设它会），那么你将不得不动态更新父容器的高度。