Question

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

以下是我所拥有的：

-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's existing helper classes的精神，我将课程命名为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

你需要为span6添加一些样式，像这样smthg：

.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

基于其他答案，这是一个响应更快的版本。我从Ivan的版本进行了更改以支持视口＆lt; 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);

Answer 7

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

如果父元素的高度或父元素中您感兴趣的子元素之外的其他元素的高度，则无需尝试计算margin-top的值。

Answer 8

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

＆＃13;

int main(){
  unsigned int i;
  for (i=1; i<34; i++)
  {
    unsigned long temp = i;
    unsigned long mul = 1;
    unsigned long val;
    unsigned long one = 1;

    // Way 1
    while (temp--)
      mul = mul << one;

    // Way 2
    val = (one<<i);

    printf(" \n 1<<%i \n mul: 0x%X , val: 0x%X\n",i, mul, val); 
  }
}

＆＃13;

到列div以补偿。

Answer 9

好吧，我不喜欢任何这些答案，我对同一问题的解决方案是添加：<div> </div>。因此，在您的方案中，它看起来像这样（或多或少），在我的情况下不需要更改样式：

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

Answer 10

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

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

10 个答案: