使用.d-flex和.flex填充使卡片具有相同的高度

Question

根据那里的答案：如何使Bootstrap 4张牌在牌列中的高度相同？

我设法使一些卡片在另一张卡片中具有相同的高度和宽度。

但在以下情况下，高度不相同。

我做错了什么？

<div class="row row-cols-1 row-cols-md-2">
<div class="d-flex col mb-3">
<doors class="flex-fill">
<div class="card">
<div class="card-header"> AAA </div>
<div class="card-body">
<ul class="list-group">
<door>
<li class="list-group-item">A1</li>
</door>
<door>
<li class="list-group-item">A2</li>
</door>
</ul>
</div>
</div>
</doors>
</div>
<div class="d-flex col mb-3">
<commands class="flex-fill">
<div class="card">
<div class="card-header"> BBB </div>
<div  class="card-body">
<ul class="list-group">
<command>
<li class="list-group-item">B1</li>
</command>
<command>
<li class="list-group-item">B2</li>
</command>
<command>
<li class="list-group-item">B3</li>
</command>
</ul>
</div>
</div>
</commands>
</div>

这是我的angular应用程序中编译的html，为了更容易阅读，我已经清理了它。

我尝试将.flex-fill移动到卡，将.d-flex移动到卡的直接父级和其他一些变体，但结果保持不变。

你可以在这里看到它的直播：https://codepen.io/Ell0ne/pen/QWKGNRd

Answer 1

列的高度相同，但卡片需要填充列的高度。对此使用h-100。。。

<div class="row row-cols-1 row-cols-md-2">
<div class="d-flex col mb-3">
<doors class="flex-fill">
<div class="card bg-inf h-100">
<div class="card-header"> AAA </div>
<div class="card-body">
<ul class="list-group">
<door>
<li class="list-group-item">A1</li>
</door>
<door>
<li class="list-group-item">A2</li>
</door>
</ul>
</div>
</div>
</doors>
</div>
<div class="d-flex col mb-3">
<commands class="flex-fill">
<div class="card h-100">
<div class="card-header"> BBB </div>
<div class="card-body">
<ul class="list-group">
<command>
<li class="list-group-item">B1</li>
</command>
<command>
<li class="list-group-item">B2</li>
</command>
<command>
<li class="list-group-item">B3</li>
</command>
</ul>
</div>
</div>
</commands>
</div>
</div>

https://codeply.com/p/ouWsT4CuSb