Ngăn chặn Twitter bootstrap trống <dd> điền với <dd> giá trị tiếp theo

Question

Xin chào CSS guru trên mạng,

Tôi yêu bootstrap twitter, và tôi prototyping rất nhiều các dự án dựa trên đó, tôi gặp phải vấn đề này, mà nếu dd tag không có HTML bên trong nó, một dd khác có vị trí của nó, tôi hiểu tại sao điều này xảy ra, vì cách dl được tạo kiểu cho phép dd mở rộng thành nhiều hàng nếu nội dung cần, tôi không muốn để phá vỡ phong cách đáng yêu này, tôi chỉ muốn sửa đổi nó để nếu giá trị dd trống, nó sẽ không sụp đổ, vì vậy trước khi tôi làm bất cứ điều gì điên ở đây như phía máy chủ để ẩn giá trị trống hoặc sửa đổi hành vi gốc hoặc thậm chí thêm jQuery, tôi muốn biết nếu có ai có thể giúp đỡ, đây là một bức tranh để minh họa cho furthe r những gì tôi đang nói, đó là RTL để dt là ở bên phải.

Answer 1

Tôi đã sử dụng ghi đè kiểu này.

.dl-horizontal > dd:after { 
    display: table; 
    content: ""; 
    clear: both; 
} 

Answer 2

Theo developer, <dd> không bao giờ được để trống (mà tôi không đồng ý).

Và tôi nghĩ anh ấy thích người dùng thêm clearfix lớp vào số <dd> s có thể trống.

<dd class="clearfix"></dd>

Cập nhật

sửa chữa này được bao gồm sau 3.2, xem release note.

Answer 3

Nếu tôi giải thích this commit đúng cách, đây sẽ là hành vi mặc định trong 3.0.0. Cho đến lúc đó, bạn cũng có thể thử thêm dl-horizontal làm phương án thay thế cho chỉ đơn giản là clearfix.

<dd class="dl-horizontal"></dd> 

Answer 4

Ví dụ:

<dd><%= @route.id %>&nbsp;</dd> 

http://www.sitepoint.com/forums/showthread.php?442551-When-dd-%28in-a-definition-list%29-is-empty-below-content-is-pulled-upwards

Answer 5

Có lẽ bạn có thể thử chỉ rằng:

dd { 
    display: inline-block; 
}