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

【问题标题】：Bootstrap 3: Reduce height of list-group-item in list-groupBootstrap 3：减少列表组中列表组项的高度
【发布时间】：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 类吗？

【问题讨论】：

标签： twitter-bootstrap height size

【解决方案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

【讨论】：