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

k4ymrczo  于 2023-09-28  发布在  Bootstrap
关注(0)|答案(1)|浏览(148)

此问题已在此处有答案

How to make Bootstrap cards the same height in card-columns?(23个回答)
Bootstrap 4 Cards of same height in columns(7个回答)
Bootstrap 4 Cards Same Height and Bottom Justified(1个答案)
Bootstrap 4: cards as grid with the same height and width(1个答案)
两年前关门了。
基于在那里找到的答案: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

gmol1639

gmol16391#

列是相同的高度,但卡需要填补列的高度。使用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

相关问题