Bootstrap 4 列内的垂直对齐

Question

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 实用程序没有成功。

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

Bootstrap 4 列内的垂直对齐

Vertical alignment within a Bootstrap 4 column

vertical-alignment

bootstrap-4