Bootstrap: CSS - Chiều cao của danh sách nhóm mục

Question

Hãy xem xét theo JSFiddle:

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

Như bạn có thể nhận thấy: các list-group-item là hoàn toàn sụp đổ. Và tôi không thể làm cho nó tự động điều chỉnh. (ví dụ: height:auto;)

nhưng khi tôi cung cấp quy tắc css: height:20px;, thì kích thước hàng được điều chỉnh. Tôi làm cách nào để tăng chiều cao của danh sách nhóm-danh mục để điều chỉnh kích thước của nội dung?

Cảm ơn bạn đã dành thời gian.

Answer 1

Bạn có thể thêm overflow:hidden hoặc "rõ ràng-sửa chữa" khác đang vào danh sách nhóm mục nếu bạn cần giữ lại các phao nổi trong các vật phẩm. Nổi luôn luôn gây ra vấn đề với chiều cao của các mặt hàng nổi. Xóa chúng hoặc thiết lập tràn sẽ buộc chiều cao được tính toán đúng cách. Xem CSS: Floating divs have 0 height để biết thêm thông tin về điều này.

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

Vì bạn đang sử dụng Bootstrap bạn có thể thêm class="clearfix" sang HTML cho list-group-items

Answer 2

Loại bỏ các float: left; từ .itemDescription sẽ khắc phục sự cố fiddle, vì vậy phong cách hoàn chỉnh cho .itemDescription sẽ là:

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