Trình đơn thả xuống Bootstrap: cách làm cho văn bản được bọc độc đáo

Question

Tôi đang học Bootstrap. Tôi muốn có một nút với thả xuống như sau:

<div class="btn-group"> 
    <a class="btn dropdown-toggle btn-mini" data-toggle="dropdown" href="#"> 
    Action 
    <span class="caret"></span> 
    </a> 
    <div class="dropdown-menu" style="width: 300px;"> 
    <div > 

    Long text goes here. 

    </div> 
    </div> 
</div> 

Thay vì trình đơn thả xuống, tôi có <div> với văn bản dài và các thẻ html khác. Vấn đề là tôi đã thử các quy tắc CSS khác nhau và văn bản dài mở rộng ra ngoài <div> hoặc khiến thanh cuộn hiển thị. Tôi chỉ muốn các văn bản dài bọc độc đáo trong các <div> và đi xuống tùy thuộc vào số lượng văn bản.

Tôi làm cách nào để thực hiện việc này?

Tôi có sử dụng thành phần "menu thả xuống" không đúng cách không?

Answer 1

Chỉ cần thêm white-space: normal; để bạn .dropdown-menu

Example fiddle

Answer 2

Đây có phải là nội dung bạn đang theo dõi không?
http://www.bootply.com/69776

Bạn sẽ thấy HTML đã thay đổi một chút và thêm lớp CSS để giới hạn chiều rộng của menu thả xuống. HTML được lấy trực tiếp từ the bootstrap site với một vài lớp bổ sung cho nút.

HTML

<div class="dropdown"> 
<a class="btn btn-min dropdown-toggle" data-toggle="dropdown" href="#"> Action 
<span class="caret"></span></a> 
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 

Lorem ipsum dolor sit Amet, consectetur adipiscing elit. Vestibulum không nulla eu dui imperdiet eleifend trong vel ligula. Ut tempor gravida leo. Sed trong tellus justo. Nam vel nisl nulla. Proin sagittis sempre nunc et vehicula. Proin quam lacus, bạn có thể dùng nó, malesuada posuere odio. Integer pharetra sed ante eget posuere. Nullam a dapibus leo, vitae gravida ligula. Lời khen ngợi và sự tuyệt đối. Suspendisse vitae libero auctor, pharetra nunc eu, laoreet dui. Fusce posuere risus risus, id ultricies lectus aliquet et. Nullam eget orci và mauris lacinia sollicitudin không phải là felis. Praesent eleifend risus et libero ultrices facilisis.

CSS

.dropdown-menu{ 
max-width:300px; 
} 

Hope this helps!

Answer 3

Thêm trắng-không gian thông thường đối với thẻ neo trong .dropdown menu làm việc cho tôi, thêm nó chỉ để .dropdown menu không công việc.

.navbar .nav li .dropdown-menu li a {white-space: normal;}