使用 .d-flex 和 .flex-fill 使卡片具有相同的高度[重复]

Posted 2023-03-05

【中文标题】使用 .d-flex 和 .flex-fill 使卡片具有相同的高度[重复]

【英文标题】：Using .d-flex and .flex-fill to make cards the same height [duplicate]

【发布时间】：2021-03-22 05:19:47

【问题描述】：

根据那里找到的答案：How to make Bootstrap 4 cards the same height in card-columns?

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

但是在下面这个例子中，高度是不一样的。

我做错了什么？

<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

【参考方案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

【讨论】：

我有点困惑，如果没有 h-100 在另一张卡中的卡上，我可以正常工作。无论如何，h-100 在这种情况下修复了它。谢谢。