Bootstrap 4列中的垂直对齐答案

【问题标题】：Vertical alignment within a Bootstrap 4 columnBootstrap 4列中的垂直对齐
【发布时间】：2020-03-11 19:43:14
【问题描述】：

image of the desired alignment我正在尝试将 Bootstrap 4 列中的元素与其顶部和底部垂直对齐。我知道这个问题已经有很多答案了，但在我的情况下似乎没有任何效果。这是我的代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="row">
   <div class="col-md-7">
      <h1>Product Name</h1>
      <h2>Product Description</h2>
      <a class="btn btn-lg header-btn btn-square" href="#">
          Datasheet
      </a>
   </div>
   <div class="col-md-5">
      <img src="#">
   </div>

我想将 h1 和 h2 元素对齐到列的顶部（产品名称和描述），而将数据表按钮元素对齐到列的底部。此列不应有固定大小，它取决于“col-md-5”中图像的大小。

非常感谢您的帮助。我没有成功使用 Bootstrap Flex 和 Spacing 实用程序。

【问题讨论】：

你需要给col-md-7里面的元素添加特定的属性
能否请您详细说明阿斯拉姆？我已经在按钮元素上尝试了 Bootstrap 边距实用程序类“mb-0”，并将“col-md-7”设置为“display: flex”，但是我无法达到预期的效果。
标题元素应该在列的顶部，而按钮应该在底部。在 Zim codeply.com/p/3umUPwCfXc 提供的链接下，所有内容似乎都垂直居中对齐。
我不清楚你想要实现什么：一个带有子元素的全屏容器对齐到顶部和底部或其他什么？
我在问题描述中添加了所需对齐的图像。我正在尝试将 Bootstrap 4 列中的按钮元素与列底部对齐。两个标题元素都应位于列的顶部。

标签： bootstrap-4 vertical-alignment

【解决方案1】：

如果您需要在其内容上使用 flexbox 对齐，则需要将 col-md-7 也设置为 display:flex (d-flex)...

https://www.codeply.com/p/3umUPwCfXc

<div class="col-md-7 d-flex flex-column">
        <h1>Product Name</h1>
        <h2>Product Description</h2>
        <a class="btn btn-primary btn-lg header-btn btn-square mt-auto" href="#"> Datasheet </a>
</div>

【讨论】：

感谢一百万！它终于奏效了！我非常感谢（为此花费了很多时间）。
请接受答案，以便其他人知道问题已解决