html - 如何在 Bootstrap 流体布局中底部对齐网格元素

Question

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

这是我所拥有的:

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

这是我想要的:

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

我见过使第一个 span 成为绝对高度并相对于它定位第二个 span 的解决方案，但最好是无需指定 div 的绝对高度的解决方案。我也愿意彻底重新思考如何实现同样的效果。我并不喜欢脚手架的这种用途，它对我来说似乎最有意义。

这个布局就像一个 fiddle :

http://jsfiddle.net/ryansturmer/A7buv/3/

Answer 1

这是仅使用 CSS/LESS 的 Bootstrap 3 的更新解决方案(尽管应该适用于旧版本):

http://jsfiddle.net/silb3r/0srp42pb/11/

您将行上的字体大小设置为 0(否则您最终会在列之间出现讨厌的空间)，然后删除列 float ，将显示设置为 inline-block，重新- 设置它们的字体大小，然后 vertical-align 可以设置为任何你需要的。

不需要 jQuery。