2013-09-29 16 views
5

Với mã trình đơn này từ mẫu bản nâng cấp, tôi muốn mỗi mục trình đơn có cả hai ngăn xếp và chiếm toàn bộ chiều rộng khi kích thước màn hình được phát hiện là nhỏ. Về cơ bản, chức năng giống hệt nhau khi nút menu "ba thanh" được nhấn, ngoại trừ người dùng không phải tự nhấn nó.Bootstrap lực lượng navbar tĩnh mở rộng trên màn hình nhỏ

Xin cảm ơn trước.

<!-- Static navbar --> 
    <div class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Project name</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 

Trả lời

7

Điều tôi hiểu là bạn muốn hiển thị tất cả các mục menu theo mặc định mà không cần phải nhấp vào menu ba dòng (hamburger) và tất cả các mục menu được xếp chồng lên nhau trên màn hình nhỏ hơn.

Mã của bạn ở trên là tốt. Chỉ cần thêm một lớp "in" vào số navbar-collapse div và tất cả các bộ.

<div class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Project name</a> 
    </div> 
    <div class="navbar-collapse collapse in"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     </ul> 
    </div> 

Dưới đây là bản demo: http://jsfiddle.net/shekhardesigner/35gSz/

+1

Hãy chắc chắn rằng bạn đã Bootstrap JS được bao gồm trong trang. –

+0

Bingo, hoạt động hoàn hảo! –

Các vấn đề liên quan