bootstrap 个卡片中大小相同的 <li> 个元素

Question

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

<!-- 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> 除了文本之外的元素添加到卡片时，间距会发生变化。如何将所有这些元素设置为相同的 height/spacing，而不需要单独更改数百个元素？我不确定要为我的页面添加什么 <style>

Answer 1

添加一个固定的 height 到 list-group class，写成：

.list-group-item {
  height: 54px;
}

bootstrap 个卡片中大小相同的 <li> 个元素

Same size <li> elements in bootstrap cards

html

css

twitter-bootstrap

bootstrap-5