Bootstrap 3：减少列表组中列表组项的高度

Posted 2023-03-06

【中文标题】Bootstrap 3：减少列表组中列表组项的高度

【英文标题】：Bootstrap 3: Reduce height of list-group-item in list-group

【发布时间】：2015-07-17 14:45:48

【问题描述】：

我想降低列表组项的高度。

    <ul class="list-group" style="max-height: 200px;overflow: auto;">
        <li class="list-group-item" ng-repeat="i in filters">
            i
        </li>
    </ul>

我该怎么办？我应该添加自定义 CSS 类吗？

【参考方案1】：

最好的解决方案是更新 bootstrap.css，如 Peter Wooster 的回答所示：Bootstrap: CSS - height of list-group-item。要更改列表组项的高度，请更新“高度”属性。如果您将高度设置为非默认值，您可能还想更改垂直“填充”偏移量。

更新 CSS 的替代方法是在每个包含 list-group-item 的

或 标记中包含样式属性。以下是默认值：

<li class="list-group-item" style="height: 40px; padding: 10px 15px;">

如果你想让盒子变小，试试：

<li class="list-group-item" style="height: 30px; padding: 5px 15px;">

请注意，当 list-group-item 的高度固定时，自动换行 misbehaves 的行为会有所不同。

【参考方案2】：

只需在样式文件中覆盖引导程序的 CSS 样式即可。请记住，您应该在引导程序的 CSS 文件之后插入您的文件。

/* Overrides list-group-item from Bootstrap */ 
.list-group-item 
    padding: 3px 10px

【参考方案3】：

如果您使用的是 bootstrap 4，那么解决方案很简单，无需编写任何新类。

我们可以根据您的需要使用 py-0/py-1/py-2/py-3/py-4 类与 LI 元素：

<ul class="list-group">
    <li class="list-group-item py-2" ng-repeat="i in filters">
        i
    </li>
</ul>

其中属性是以下之一：

m - 边距 p - 填充

其中边是以下之一：

t - 顶部 b - 底部 l - 左 r - 对 x - 左右 y - 顶部和底部

其中 Number 是以下之一：

1: .25rem = 4px 2: .50rem = 8px 3: .75rem = 12px 4：1rem = 16px