更改 'thickness' 共 bootstrap list-group-item

Question

我想减少 list-group-item 的厚度，同时保持标题文本合适。

<ul class="list-group"> 
  <a href="#id" class="list-group-item list-group-item-info" data-toggle="collapse">Title</a>
</ul>

.list-group-item {
  height: 10px;
}

这成功地减少了厚度，但标题文本仍然太大。我怀疑身高不对属性使用?

text too big

Answer 1

大小由这个class

控制

.list-group-item {
    position: relative;
    display: block;
    padding: 0px 15px; /* adjust here */
    margin-bottom: -1px;
    border: 1px solid #ddd;
    line-height: 1em /* set to text height */
}

Codepen Demo

Answer 2

li 标记具有默认填充。您必须重置它才能实现它。文本有一个 line-height 定义相对于他的大小。您必须将 line-height 定义为等于 height.

  li {
    padding:0;
    height: 10px;
    line-height: 10px;
  }

Answer 3

不要那样做，而是像这样使用填充..

ul a {
padding:10px; // give padding
height:auto;
}

更改 'thickness' 共 bootstrap list-group-item

Changing 'thickness' of bootstrap list-group-item

css

listitem

thickness