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

Question

我使用Twitter的bootstrap进行流畅的布局,其中我有一行有两列.第一列有很多内容,我想通常填写范围.第二列只有一个按钮和一些文本,我想在第一列中相对于单元格进行底部对齐.

这就是我所拥有的:

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

这就是我想要的:

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

我已经看到使第一个跨度成为绝对高度的解决方案,并相对于它定位第二个跨度,但是我不需要指定我的div的绝对高度的解决方案将是首选.我也愿意彻底重新思考如何达到同样的效果.我没有嫁给这种脚手架的使用,它似乎对我来说最有意义.

这种布局作为小提琴:

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

Answer 1

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

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

你在行上设置font-size为0(否则你最终会在列之间产生令人讨厌的空间),然后删除列浮动,设置显示inline-block,重新设置它们的字体大小,然后vertical-align可以设置为你需要什么.

不需要jQuery.

Answer 2

有关可行的解决方案,请参见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等)
• 它得到了相当好的支持(所有主流浏览器都支持margin-top)

现在坏消息:

• 它需要jQuery
• 这不是,写的,响应(抱歉)

Answer 3

你可以使用flex:

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

Answer 4

你需要为span6smthg 添加一些样式:

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

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

Answer 5

这里还有一个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);
        }
      };
    }

Answer 6

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

margin-top当您在父元素或另一个元素上的高度大于父元素内您感兴趣的子元素的高度时，无需尝试计算值。

Answer 7

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

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

到列 div 进行补偿。