Bootstrap: CSS - Höhe der Listengruppen Artikel

Question

Bitte beachten Sie JSFiddle folgen:

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

Wie Sie vielleicht bemerkt: die list-group-item vollständig kollabiert ist. Und ich kann nicht scheinen, es automatisch einzustellen. (z. B.)

noch, wenn ich die CSS-Regel liefern: height:20px;, dann wird die Zeilengröße angepasst. Wie kann ich die Höhe eines Listengruppenelements an die Größe des Inhalts anpassen?

Vielen Dank für Ihre Zeit.

Answer 1

Sie overflow:hidden hinzufügen oder andere "clear-fix" Code zur Liste Gruppenposten wenn Sie die Floats innerhalb der Artikel behalten müssen. Schwebekörper verursachen immer Probleme mit der Höhe der schwebenden Gegenstände. Wenn Sie sie löschen oder den Überlauf einstellen, wird die Höhe korrekt berechnet. Weitere Informationen hierzu finden Sie unter 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; 
} 

Da Sie Bootstrap verwenden könnten Sie die class="clearfix" hinzufügen für die list-group-items

Answer 2

Entfernen der float: left; von .itemDescription Ihr Problem beheben fiddle, so dass der komplette Stil für .itemDescription sein wird:

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