Bootstrap列表 - 缩小并消除边框

Question

我使用list-group和list-group-item创建了一个Bootstrap列表。

不幸的是，每个列表项都占用了大量空间：

我想缩小每个list-group-item元素的大小。

我也想消除边界。

我知道这可以用CSS完成。 但是，我不熟悉它。 我该怎么做这些改变？

Answer 1

您可以将自定义CSS添加到项目/站点并覆盖原始引导程序定义，如下所示：

.list-group-item {
    border:0 !important;
    padding-top:2px !important;
    padding-bottom:2px !important;
}

您必须覆盖.list-group-items的填充。您可以在这个小提琴上看到一个例子：https://jsfiddle.net/sebastianbrosch/vqLzncbk/

可以通过在以下网站上自定义下载来从引导程序本身删除边框：http://getbootstrap.com/customize/#list-group

Answer 2

列表组符合bootstrap中列的大小，因此减少它以减小大小。

对于边框，列表继承了类.list-group-item。您可以编写自己的css来覆盖引导主题，例如：

.list-group-item {
     border-style: none;
}