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

Posted 2023-03-05

【中文标题】如何在引导流体布局中底部对齐网格元素

【英文标题】：How do I bottom-align grid elements in bootstrap fluid layout

【发布时间】：2012-11-30 06:04:42

【问题描述】：

我使用 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/

【问题讨论】：

你不能在你的 .rightspan 中添加大约 200px 的 margin-top 吗？

Shortcut to CSS 只回答这个问题：***.com/a/14223553/259725

bootply.com/125740#（对不起，我忘记了这个链接来自哪个 SO 问题的答案。）

【参考方案1】：

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

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

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

不需要 jQuery。

【讨论】：

我想保持在中间。但是，在您的 jsfiddle 中，当我尝试“vertical-allign:middle”时，它不起作用。有什么想法吗？

尝试将divs 都设置为vertical-align: middle;。

这是唯一可以接受的答案！ @Lukas's 将忽略不填满一行的列的宽度。以及用于样式的 DOM 操作...... SMH。

你的 CSS 被锁定在行之外（具体来说，.myrow）...这不意味着你不能让一列顶部对齐，一列底部对齐，第三列列顶部对齐？

谢谢！与 Bootstrap 4 配合使用。

【参考方案2】：

请注意：对于 Bootstrap 4+ 用户，请考虑Christophe's solution（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's existing helper classes 的精神，我将课程命名为pull-down。 只有被“下拉”的元素需要被分类，所以... ...它可重复用于不同的元素类型（div、span、section、p 等） 它得到了很好的支持（所有主流浏览器都支持 margin-top）

现在是坏消息：

需要 jQuery 它不是如所写的那样响应式（抱歉）

【讨论】：

为了响应性，也许挂钩 window.resize？ ***.com/a/2969091/244811

不要对可能是 CSS 解决方案的东西使用 jQuery 解决方案。出于样式目的而避免 DOM 操作的原因有很多。

@Archonic ：纯 CSS 解决方案是什么？我也更喜欢它而不是依赖于 JS 的解决方案。请记住 OP 的规定：“最好不要指定我的 div 的绝对高度的解决方案”

@cfx 发布了一个仅使用 css 的解决方案，其中包含不需要绝对高度的小提琴。

另一方面，我的解决方案允许用户底部对齐单个元素（提供与 Bootstrap 的 .pull-left 和 .pull-right 类似的行为），而不会影响兄弟姐妹。这可以通过纯 CSS 解决方案来完成吗？

【参考方案3】：

你可以使用弹性：

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

【讨论】：

在我看来，使用 felx 非常简单直接，使用“align-items:baseline”还有一个优势，它非常适合在不同的项目中使用不同的字体来对齐。

使用 flex 的绝佳建议。简单，直截了当，并使用 Bootstrap 来解决 Bootstrap 问题。

出色的答案，与引导程序完美配合，无需 javascript / jquery。

是的，将它添加到常规引导行中，然后 bam，它可以工作。美丽的。无响应的 jquery 解决方案如何成为最佳答案？我们永远不会知道。

@LeviFuller 我的猜测是因为这个解决方案只支持一个断点

【参考方案4】：

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

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

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

【讨论】：

我会创建一个特定的 css 类而不是将其设置为 span6，但表格单元格策略效果很好！我还必须将“显示：表行”设置为包含的 div 以具有正确的宽度。

对于 Bootstrap 3 我添加了这条规则： .row.align-bottom > [class^=col] display: table-cell;垂直对齐：底部；浮动：无； 将 align-bottom 应用于行 <div class="row align-bottom">

@Martin，当您还设置 .align-bottom display: table-row; 时，您的规则工作正常，但是，行对齐已关闭，因为表行不尊重引导边距-左右边距：-15px......想法？

@AlexWhite - 将padding-left: 0 和padding-right: 0 放在该行的所有列上。

当列不填满行宽时，这将忽略列宽。例如，当使用偏移量时。

【参考方案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);
        
      ;
    

【参考方案6】：

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

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

【讨论】：

这应该是公认的答案：它简短、简单，适用于任何支持 flex 的浏览器。唯一的缺点是它破坏了响应能力。

【参考方案7】：

根据此处的其他答案，这是一个响应速度更快的版本。我对 Ivan 的版本进行了更改，以支持

!function ($)  //ensure $ always references jQuery
    $(function ()  //when dom has finished loading
        //make top text appear aligned to bottom: http://***.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);

【讨论】：

感谢您的改进，我刚刚将它用于当前项目并且运行良好。

为什么将margin-top设置为0，然后再设置为新值？还有，为什么要把这些东西放在两个each()“循环”里？

【参考方案8】：

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

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

到列divs来补偿。

【参考方案9】：

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

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

【讨论】：

如果左侧单元格的长度未知，如何知道要添加的 的数量？

【参考方案10】：

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

【讨论】：

你应该尝试在你的答案中添加一些信息来解释为什么它回答了 OP 问题