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元素:

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

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。要更改列表组项的高度，请更新“height”属性。如果您将高度设置为非默认值，您可能还想更改垂直“填充”偏移。

更新 CSS 的替代方法是在每个包含列表组项的 <li> 或 <a> 标签中包含一个样式属性。以下是默认值：

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

如果您想让盒子变小，请尝试：

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

请注意，当列表组项的高度固定时，自动换行行为会有所不同。