尝试垂直对齐以下卡片中的文本中心:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="row text-center h-100">
<div class="col-md-3 text-center my-auto">
<div class="card card-block justify-content-center" style="height: 120px">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>我完全了解这里有许多类似的问题,但是我尝试了各种解决方案,但它们似乎都不适用于我的卡片.
我在父母,卡片和卡片身上尝试了"my-auto".我尝试了"d-flex align-items-center h-100"和"justify-content-center".还试图玩显示属性.我错过了什么？
请参阅代码片段：无论前一个 div 的高度如何，我都试图将 div 与列底部的“了解更多”以相同的垂直高度对齐。
重复免责声明：我一直在研究如何使 Bootstrap 列的高度都相同？以及如何使 Bootstrap 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 …