Bootstrap：CSS - 列表组项的高度答案

【问题标题】：Bootstrap: CSS - height of list-group-itemBootstrap：CSS - 列表组项的高度
【发布时间】：2014-08-08 17:33:54
【问题描述】：

请考虑关注 JSFiddle：

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

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

然而，当我提供 css 规则时：height:20px;，然后调整行大小。如何使列表组项的高度适应内容的大小？

感谢您的宝贵时间。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

如果您需要在项目中保留浮动，您可以将overflow:hidden 或其他“清除修复”代码添加到列表组项目。浮动总是会导致浮动项目的高度出现问题。清除它们或设置溢出将强制正确计算高度。有关这方面的更多信息，请参阅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" 添加到 HTML 中以获取 list-group-items

【讨论】：

哦，我不知道花车的影响有那么大。我从来不知道他们对身高有任何影响！谢谢你的解释。
我添加了另一个问题的链接来帮助解释这种效果。有很多方法可以减少这个问题。有多种方法可以清除浮动。最古老的是在装有浮动的容器之后添加<br style="clear:both"/>。它现在不受欢迎，因为它不是语义的。大多数 CSS 框架都包含一个 .clearfix 或类似名称的规则来解决这个问题。
对我来说至关重要的是 `overflow:hidden; `

【解决方案2】：

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

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

【讨论】：

你的权利！但是为什么 {float: left} 会影响高度？
@svranken：也许通读那篇文章可能会有所帮助：w3.org/wiki/Floats_and_clearing
浮动元素的高度没有被设计用于计算其父级的高度，对此的原因我并不清楚，我相信这是因为它们被“从文档流中取出” '。您可以通过clearing float 让父母考虑浮动项目，或者在您的情况下删除不需要的浮动。
是的！关于“包含浮动”的部分非常有帮助！