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如果需要在项目中保留浮点数,可以向list-group-item 添加或其他"clear-fix"代码.浮动总是会导致浮动物品的高度出现问题.清除它们或设置溢出将强制正确计算高度.请参阅CSS:浮动div有0高度以获取更多信息.

.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"HTML 添加到HTML中list-group-items

Answer 2

删除float: left;from.itemDescription将解决您的问题fiddle，因此完整的样式.itemDescription将是：

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