引导卡中相同大小的 <li> 元素答案

【问题标题】：Same size <li> elements in bootstrap cards引导卡中相同大小的 <li> 元素
【发布时间】：2022-02-22 15:09:54
【问题描述】：

我正在使用以下“模板”，我正在构建的设置页面上有很多这样的卡片。

<!-- Card template -->
<div class="card mt-3 shadow-sm">
    <div class="card-header">
        <b>Header</b>
    </div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item d-flex justify-content-between align-items-center">
            Button
            <a class="btn btn-sm btn-outline-secondary ms-auto" type="button">
                View
            </a>
        </li>
        <li class="list-group-item">...</li>
        <li class="list-group-item">...</li>
        <li class="list-group-item">...</li>
        <li class="list-group-item">
            <div class="container-fluid ps-0 pe-0">
                <div class="row d-flex align-items-center justify-content-between">
                    <div class="col-6">
                        Selector
                    </div>
                    <div class="col-5">
                        <div style="width: 100%" class="form-switch ms-auto">
                            <select class="form-select">
                                <option value="">Test</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

我在这里遇到的问题是，当<li> 除了文本之外的元素被添加到卡片时，间距会发生变化。如何将所有这些元素设置为相同的高度/间距，而无需单独更改数百个？我不知道该为我的页面添加什么<style>

【问题讨论】：

为.list-group-item定义一定的高度应该会有所帮助。
因为第一个
有按钮，最后一个
有输入字段，所以按钮和输入有 height: ~ 38px 并且只有文本有 font-size:16px + line height = 24px 所以它的发生不一致。因此，如果您使用的是 Bootstrap v-5
上定义 min-height: 54px