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

Question

我使用 Twitter 的引导程序有一个流畅的布局，其中我有一排有两列。第一栏内容很多，我想正常填满span。第二列只有一个按钮和一些文本，我想相对于第一列中的单元格底部对齐。

这是我所拥有的：

-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/

score 69 · Accepted Answer

这是仅使用 CSS/LESS 的 Bootstrap 3（应该适用于旧版本）的更新解决方案：

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

您将行上的字体大小设置为 0（否则您最终会在列之间出现令人讨厌的空间），然后删除列浮动，将显示设置为inline-block，重新设置其字体大小，然后vertical-align可以设置为你需要的任何东西。

不需要 jQuery。

score 49 · Accepted Answer

请注意：对于 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 等）
它得到了很好的支持（所有主流浏览器都支持 margin-top）

现在坏消息：

它需要 jQuery
它不是，书面的，响应式的（对不起）

score 36 · Accepted Answer

您可以使用弹性：

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

score 27 · Accepted Answer

您需要为span6, smthg 添加一些样式，如下所示：

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

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

score 14 · Accepted Answer

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

score 7 · Accepted Answer

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

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

score 4 · Accepted Answer

根据此处的其他答案，这是一个响应速度更快的版本。我对 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);

score 4 · Accepted Answer

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

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

到列 div 进行补偿。

score 0 · Accepted Answer

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

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

score -3 · Accepted Answer

-3

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

于 2016-07-08T21:31:02.253 回答

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

10 回答 10

Related

Reference