Bootstrap: CSS - wysokość lista-group-poz

Question

Proszę zwrócić uwagę, postępuj JSFiddle:

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

Jak można Uwaga: list-group-item jest całkowicie upadł. I nie mogę sprawić, żeby to się automatycznie poprawiło. (np. height:auto;)

jeszcze, gdy dostarczę regułę css: height:20px;, wtedy rozmiar wiersza jest regulowany. Jak ustawić wysokość elementu listy w grupie, aby dostosować go do rozmiaru zawartości?

Dziękuję za poświęcony czas.

Answer 1

Możesz dodać overflow:hidden lub inny „jasny-fix” kod do listy-group-pozycji jeśli chcesz zachować pływaki wewnątrz przedmiotów. Pływaki zawsze powodują problemy z wysokością pływających przedmiotów. Usunięcie ich lub ustawienie przepełnienia spowoduje wymuszenie obliczenia wysokości. Aby uzyskać więcej informacji na ten temat, patrz 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; 
} 

Ponieważ używasz Bootstrap można dodać class="clearfix" do HTML dla list-group-items

Answer 2

Wyjmowanie float: left; z .itemDescription rozwiąże problemu fiddle, więc pełna styl .itemDescription będą:

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