改变厚度＆＃39; 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;
}

这成功地减少了厚度，但标题文字仍然太大。我怀疑高度是错误的使用属性？

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