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

我有一个流动的布局使用 Twitter 的引导程序，其中我有一行两列。第一列有很多内容，我想正常地填充这个跨度。第二列只有一个按钮和一些文本，我想相对于第一列中的单元格在底部对齐。

以下是我的发现:

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

这是我想要的:

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

我已经看到过一些解决方案，它们将第一个 span 设置为绝对高度，并将第二个 span 设置为相对于绝对高度的位置，但最好是不需要指定 div 的绝对高度的解决方案。我也愿意彻底重新思考如何达到同样的效果。我没有和脚手架的使用结婚，只是对我来说，它似乎是最有意义的。

这个布局就像一把小提琴:

Http://jsfiddle.net/ryansturmer/a7buv/3/

185079 次浏览
小开

你需要为 span6增加一些样式，像这样的:

.row-fluid .span6 {
display: table-cell;
vertical-align: bottom;
float: none;
}

这是你的小提琴: http://jsfiddle.net/sgB3T/

小开
最佳答案

请注意: 对于 Bootstrap 4 + 用户，请考虑 Christophe 的解决方案(Bootstrap 4引入了 Flexbox，它提供了一个更优雅的纯 CSS 解决方案)。以下内容将适用于 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())
});

好的一面是:

  • 本着 Bootstrap 的现有助手类的精神，我把这个类命名为 pull-down。
  • 只有被“下拉”的元素需要被分类，所以..。
  • 它可以为不同的元素类型(div、 span、 section、 p 等)重用
  • it's fairly-well supported (all the major browsers support margin-top)

坏消息是:

  • 它需要 jQuery
  • 它不是，按照写的，响应(对不起)
小开

基于其他的答案，这里有一个更具响应性的版本。我对 Ivan 的版本进行了更改，以支持视窗 < 768px 宽，并更好地支持缓慢的窗口大小调整。

!function ($) { //ensure $ always references jQuery
$(function () { //when dom has finished loading
//make top text appear aligned to bottom: http://stackoverflow.com/questions/13841387/how-do-i-bottom-align-grid-elements-in-bootstrap-fluid-layout
function fixHeader() {
//for each element that is classed as 'pull-down'
//reset margin-top for all pull down items
$('.pull-down').each(function () {
$(this).css('margin-top', 0);
});


//set its margin-top to the difference between its own height and the height of its parent
$('.pull-down').each(function () {
if ($(window).innerWidth() >= 768) {
$(this).css('margin-top', $(this).parent().height() - $(this).height());
}
});
}


$(window).resize(function () {
fixHeader();
});


fixHeader();
});
}(window.jQuery);
小开

这里还有一个 angularjs 指令来实现这个功能

    pullDown: function() {
return {
restrict: 'A',
link: function ($scope, iElement, iAttrs) {
var $parent = iElement.parent();
var $parentHeight = $parent.height();
var height = iElement.height();


iElement.css('margin-top', $parentHeight - height);
}
};
}
小开

这是 Bootstrap 3的一个更新的解决方案(应该适用于旧版本) ，只使用 CSS/LESS:

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

你在行上设置字体大小为0(否则你会在列之间留下讨厌的空间) ，然后移除浮动列，将 display 设置为 inline-block，重新设置它们的字体大小，然后 vertical-align可以设置为任何你需要的。

不需要 jQuery。

小开

好吧，我不喜欢这些答案中的任何一个，我对同一个问题的解决方案是加上这个: <div>&nbsp;</div>。因此，在你的方案中，它看起来(或多或少)是这样的，在我的情况下，没有必要改变风格:

-row-fluid-------------------------------------
+-span6----------+ +----span6----------+
|                | | +---div---+       |
| content        | | | & nbsp; |       |
| that           | | +---------+       |
| is tall        | | +-----div--------+|
|                | | |short content   ||
|                | | +----------------+|
+----------------+ +-------------------+
-----------------------------------------------
小开

You can use flex:

@media (min-width: 768px) {
.row-fluid {
display: flex;
align-items: flex-end;
}
}
小开

这是基于 cfx 的解决方案，而不是在父容器中将字体大小设置为零，以删除由于显示而添加的列间空间: inline-block 并且必须重置它们，我只是添加了

.row.row-align-bottom > div {
float: none;
display: inline-block;
vertical-align: bottom;
margin-right: -0.25em;
}

对列 div 进行补偿。

小开 
.align-bottom {
position: absolute;
bottom: 10px;
right: 10px;
}
小开

只需将父级设置为 display:flex;，将子级设置为 margin-top:auto。这将把子内容放在父元素的底部，假设父元素的高度大于子元素。

当您的父元素或其他元素的高度大于您的父元素中感兴趣的子元素时，不需要尝试计算 margin-top的值。


提交答案