Bootstrap 4将div与不同高度的列中另一个div的底部对齐答案

【问题标题】：Bootstrap 4 aligning div to bottom of another div in column with different heightsBootstrap 4将div与不同高度的列中另一个div的底部对齐
【发布时间】：2017-09-30 09:56:14
【问题描述】：

请查看代码片段：我正在尝试将 div 与列底部的“了解更多”对齐在相同的垂直高度，而不管前一个 div 的高度如何。

重复免责声明：我一直在查看 How can I make Bootstrap columns all the same height? 和 How can I make Bootstrap 4 columns all the same height? 这似乎是一个类似的问题。但是，这些解决方案对我不起作用，因为它们主要适用于 BS3（例如，我尝试了 class="row-eq-height" 的示例），并且关于 BS4 的大多数答案都暗示相等高度是 BS4 中的默认值。

但是，从红色边框可以看出，默认情况下，只有外列高度“拉伸”到底部，内列高度仅等于文本高度。我很困惑。

* { border: 1px solid red !important; }

<head>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"  integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
   
  </head>
  <body>
    <div class="row text-center no-gutters">
        <div class="col-sm-4">
          <div>
            <h4>Components and examples</h4>
            <p class="body-block-3 mx-auto">multiple line text example random text should break across multiple lines</p>
          </div>
          <div class="align-items-end">
            <a href="">Learn more 1</a>
          </div>
        </div>
         <div class="col-sm-4">
          <div>
            <h4>Components and examples</h4>
            <p class="body-block-3 mx-auto">one line text example</p>
          </div>
          <div class="align-items-end">
            <a href="">Learn more 2</a>
          </div>
        </div>
         <div class="col-sm-4">
          <div>
            <h4>Components and examples</h4>
            <p class="body-block-3 mx-auto">multiple line text example random text should break across multiple lines</p>
          </div>
          <div class="align-items-end">
            <a href="">Learn more 3</a>
          </div>
        </div>
      </div>
      </body>

另外，我尝试了各种 Bootstrap 对齐选项，例如使用“align-items-stretch”拉伸中间 div 并为最后一个 div 使用“d-flex align-items-end”。没有任何效果。

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

引导程序中的列不是display: flex，这就是align-items-end 不起作用的原因。将类 d-flex 和 flex-column 添加到您的列类中。添加类 .flex-1 并将其放在您的上 div 中。

* {
  border: 1px solid red !important;
}

.body-block-3 {
  max-width: 250px;
  margin-left: auto;
  margin-right: auto;
}

.flex-1 {
  flex: 1;
}

<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

</head>

<body>
  <div class="row text-center no-gutters">
    <div class="col-sm-4 d-flex flex-column">
      <div class="flex-1">
        <h4>Components and examples</h4>
        <p class="body-block-3">multiple line text example random text should break across multiple lines</p>
      </div>
      <div>
        <a href="">Learn more 1</a>
      </div>
    </div>
    <div class="col-sm-4 d-flex flex-column">
      <div class="flex-1">
        <h4>Components and examples</h4>
        <p class="body-block-3">one line text example</p>
      </div>
      <div>
        <a href="">Learn more 2</a>
      </div>
    </div>
    <div class="col-sm-4 d-flex flex-column">
      <div class="flex-1">
        <h4>Components and examples</h4>
        <p class="body-block-3">multiple line text example random text should break across multiple lines</p>
      </div>
      <div>
        <a href="">Learn more 1</a>
      </div>
    </div>
  </div>
</body>

编辑：还想提一下，您可以使用 boostrap 实用程序类 mb-auto 而不是 flex-1

    <div class="col-sm-4 d-flex flex-column">
      <div class="mb-auto">
        <h4>Components and examples</h4>
        <p class="body-block-3">one line text example</p>
      </div>
      <div>
        <a href="">Learn more 2</a>
      </div>
    </div>

但是，您的上部 div 不会占用整个空间（拉伸），不确定这是否是您的用例的问题。如果没有，您将不必创建任何新课程，并遵循引导程序 with align-item section 上的文档@

编辑：更新 .body-block-3 类

【讨论】：

2 个问题：我看到上面的 div 现在是左对齐的（在屏幕尺寸 +1000 像素宽度上运行时请注意）。此外，这些盒子现在无法在移动设备上正常损坏。
是否有可能以某种方式使文本 div 具有相同的高度，或者底部对齐它们？我在这里尝试过getbootstrap.com.vn/examples/equal-height-columns，但无法正常工作。根据示例，只需添加 .row-eq-height { display: -webkit-box;显示：-webkit-flex；显示：-ms-flexbox；显示：弯曲； }
@tealowpillow 刚刚进行了另一次编辑，我想我得到了您正在寻找的结果。实现时不要忘记新类.flex-1。让我知道它是怎么回事.... man CSS 有时会很痛苦
太好了，现在可以了。但是，我在 css 中的“body-block-3”类中有一个最大宽度： .body-block-3 { max-width: 250px;显示：块；}。如果我将此添加到您的代码中，尽管行中有“文本中心”，但文本不再居中对齐。我猜 display: block 被覆盖了......知道如何解决这个问题吗？
@tealowpillow 查看编辑以进行更新。您需要删除 display: block 并将 margins 设置为 auto 在您的 .body-block-3 类中的左右