Bootstrap：CSS - list-group-item的高度

Question

请考虑关注JSFiddle：

http://jsfiddle.net/7W2r4/12/

您可能会注意到：list-group-item完全崩溃了。我似乎无法让它自动调整。 （例如height:auto;）

但是当我提供css规则：height:20px;时，则会调整行大小。 如何使list-group-item的高度调整为内容大小？

感谢您的时间。

Answer 1

您可以添加overflow:hidden或其他＆＃34; clear-fix＆＃34;如果需要在项目中保留浮点数，则将代码添加到list-group-item。浮动总是会导致浮动物品的高度出现问题。清除它们或设置溢出将强制正确计算高度。有关详细信息，请参阅CSS: Floating divs have 0 height。

.list-group-item
{
  overflow:hidden;  
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
}

由于您使用的是Bootstrap，因此可以将class="clearfix"添加到list-group-items

的HTML中

Answer 2

从float: left;移除.itemDescription将解决您的问题fiddle，因此.itemDescription的完整样式将为：

.itemDescription
{
    width: 30%;
    vertical-align: middle;
    height: 100%;
    line-height:100%;
    vertical-align: middle;
}