如何在bootstrap fluid布局中底对齐网格元素
我有一个使用Twitter的bootstrap的流畅布局，其中我有一行和两列。第一列有很多内容，我想正常填充跨度。第二列只有一个按钮和一些文本，我希望它们相对于第一列中的单元格进行底部对齐。
这就是我所拥有的：
-row-fluid-------------------------------------
+-span6----------+ +-span6----------+
| | |short content |
| content | +----------------+
| that |
| is tall |
| |
+----------------+
-----------------------------------------------这是我想要的：
-row-fluid-------------------------------------
+-span6----------+
| |
| content |
| that |
| is tall | +-span6----------+
| | |short content |
+----------------+ +----------------+
-----------------------------------------------我见过这样的解决方案:将第一个跨度设置为绝对高度，并将第二个跨度相对于它进行定位，但如果不需要指定div的绝对高度，则更可取。我也愿意彻底重新思考如何达到同样的效果。我并不喜欢这种脚手架的使用，它对我来说似乎是最有意义的。
将此布局作为小提琴进行：
回答 10
Stack Overflow用户
发布于 2013-01-09 04:36:37
请注意：对于Bootstrap 4+用户，请考虑 (Bootstrap 4引入的flexbox，它提供了一个更优雅的CSS-only解决方案)。以下内容适用于较早版本的Bootstrap...
有关有效的解决方案，请参阅http://jsfiddle.net/jhfrench/bAHfj/。
//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())
});好的一面是：
按照页边距的精神，我将这个类命名为pull-down.
- only需要对“下拉”的元素进行分类，so...
- ...it's可重用于不同的元素类型(div、、
- 、p等)
- 它得到了很好的支持(所有主流浏览器都支持
-)
现在坏消息是：
- it需要jQuery
- it it，as-written，responsive (抱歉)
Stack Overflow用户
发布于 2015-01-29 02:51:20
这是Bootstrap 3的更新解决方案(不过应该适用于旧版本)，它只使用CSS/LESS：
http://jsfiddle.net/silb3r/0srp42pb/11/
将行上的font-size设置为0(否则将导致列之间出现讨厌的空格)，然后删除列浮动，将display设置为inline-block，重新设置它们的font-size，然后可以将vertical-align设置为所需的任何值。
不需要jQuery。
Stack Overflow用户
发布于 2016-01-25 06:29:15
您可以使用flex：
@media (min-width: 768px) {
.row-fluid {
display: flex;
align-items: flex-end;
}
}https://stackoverflow.com/questions/13841387
复制相似问题