Twitter bootstrap 引导3：减少列表组中列表组项的高度

我想降低列表组项的高度

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

{{i}

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

---

最佳解决方案是更新bootstrap.css，如Peter Wooster的回答所示：。要更改列表组项目的高度，请更新“高度”属性。如果将高度设置为非默认值，则可能还需要更改垂直“填充”偏移

更新CSS的替代方法是在包含列表组项的每个

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

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

如果要使框变小，请尝试：

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

---

请注意，当列表组项目的高度固定时，word wrap的错误行为会有所不同。

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

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

---

若您使用的是Bootstrap4，那个么解决方案很简单，不需要编写任何新类

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

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

{{i}

如果财产是下列财产之一：

• 边际利润
• p-填充

其中，边是以下其中之一：

• t形车顶
• b-底部
• 左
• 右
• x-左和右
• y-顶部和底部

其中，数字为以下之一：

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