twitter-bootstrap Bootstrap 3：减少列表组中列表组项的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30094106/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3: Reduce height of list-group-item in list-group
提问by Kle
I want to reduce height of 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>
How can I do? Should I add custom css class?
我能怎么做？我应该添加自定义 css 类吗？
回答by Ali Adravi
If you are using bootstrap 4 then solution is easy, no need to write any new class.
如果您使用的是 bootstrap 4，那么解决方案很简单，无需编写任何新类。
We can use py-0/py-1/py-2/py-3/py-4 class according to your need with LI element:
我们可以根据您的需要使用 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>
回答by Pavel K.
Just override bootstrap's CSS-style in your styles file. Please keep in mind, that you should insert your file after bootstrap's CSS-file.
只需在您的样式文件中覆盖 bootstrap 的 CSS 样式即可。请记住，您应该在引导程序的 CSS 文件之后插入您的文件。
/* Overrides list-group-item from Bootstrap */
.list-group-item {
padding: 3px 10px
}
回答by Amos Long
The best solution is to update bootstrap.css as seen in Peter Wooster's answer here: Bootstrap: CSS - height of list-group-item. To change the height of a list-group-item, update the "height" property. If you set the height to a non-default value, you probably also want to change vertical "padding" offset.
最好的解决方案是更新 bootstrap.css，如 Peter Wooster 的回答所示：Bootstrap: CSS - height of list-group-item。要更改列表组项的高度，请更新“height”属性。如果您将高度设置为非默认值，您可能还想更改垂直“填充”偏移。
The alternative to updating the CSS is to include a style attribute in every <li> or <a> tag that contains a list-group-item. Here are the default values:
更新 CSS 的替代方法是在每个包含列表组项的 <li> 或 <a> 标签中包含一个样式属性。以下是默认值：
<li class="list-group-item" style="height: 40px; padding: 10px 15px;">
If you want to make the boxes smaller, try:
如果您想让盒子变小，请尝试：
<li class="list-group-item" style="height: 30px; padding: 5px 15px;">
Be aware that word wrap misbehavesbehaves differently when the list-group-item's height is fixed.
请注意，当列表组项的高度固定时，自动换行行为会有所不同。
