请参阅代码截取：我正在尝试将div与列底部相同垂直高度的“了解更多”对齐，而不考虑上一个div的高度。
重复免责声明：我一直在研究如何使引导列具有相同的高度？如何使引导4列的高度相同？这似乎是一个类似的问题。但是，这些解决方案对我不起作用，因为它们大多适用于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对齐选项，例如在中间div中使用“对齐项拉伸”，并在最后一个div中使用“d-flex对齐项结束”。没有工作。
引导程序中的列不显示在display:flex中，这就是为什么align items end不起作用的原因。将类d-flex和flex-column添加到列类中。添加了类。flex-1并将其放在上半部分。
* {
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>