Bootstrap 3：降低列表组中list-group-item的高度

Question

我想减少list-group-item的高度。

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

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

Answer 1

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

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

IntentsSupported

Answer 2

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

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

Answer 3

最好的解决方案是更新bootstrap.css，如Peter Wooster的回答：Bootstrap: CSS - height of list-group-item。要更改list-group-item的高度，请更新＆＃34; height＆＃34;属性。如果您将高度设置为非默认值，您可能还希望更改垂直＆＃34;填充＆＃34;偏移量。

更新CSS的替代方法是在每个＆lt; li＆gt;中包含一个样式属性。或者＆lt; a＆gt;包含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 的行为会有所不同。