css - Changing 'thickness' of bootstrap list-group-item

Question

I want to reduce how thick the list-group-item are, whilst keeping the title text fitting.

<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;
}

This successfully reduces the thickness, but the Title text remains too big. I suspect height is the wrong property to use?

Answer 1

大小由这个类控制

.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 演示

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;
}