如何在自举流体布局中底部对齐网格元素

Question

我使用Twitter的引导程序进行了流畅的布局，其中一行包含两列。第一列有很多内容，我想正常填充范围。第二列只有一个按钮和一些文本，我想相对于第一列中的单元格底部对齐。

这是我所拥有的：

-row-fluid-------------------------------------
+-span6----------+ +-span6----------+
|                | |short content   |
| content        | +----------------+
| that           | 
| is tall        |    
|                |
+----------------+
-----------------------------------------------

这就是我想要的：

-row-fluid-------------------------------------
+-span6----------+
|                |
| content        |
| that           | 
| is tall        | +-span6----------+    
|                | |short content   |
+----------------+ +----------------+
-----------------------------------------------

我已经看到了使第一个跨度成为绝对高度并将其相对于第二跨度定位的解决方案，但是最好不要指定div的绝对高度的解决方案。我也愿意重新考虑如何实现相同的效果。我不喜欢这种脚手架的用途，对我而言似乎才是最有意义的。

这种布局只是摆弄：

Answer 1

//for each element that is classed as ‘pull-down’, set its margin-top to the difference between its own height and the height of its parent
$(‘.pull-down’).each(function() {
var $this = $(this);
$this.css(‘margin-top’, $this.parent().height() - $this.height())
});

从积极的一面：

• 本着Bootstrap现有帮助程序类的精神，我将该类命名为pull-down。
• 仅需要对“拉下”的元素进行分类，因此…
• …可重用于不同的元素类型（div，span，section，p等）
• 它得到了很好的支持（所有主流浏览器都支持margin-top）

现在的坏消息是：

• 它需要jQuery
• 按书面要求，不是这样（抱歉）