chứa bên trong một thanh điều hướng ở twitter bootstrap

Question

Tôi có một mã navbar sau sử dụng twitter bootstrap

<div class="navbar navbar-inverse"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <ul class="nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     </ul> 
    </div> 
    </div> 
</div> 

và đầu ra là Khi tôi loại bỏ "width: auto" từ" .navbar .container {width: auto} "trong bootstap.css đầu ra sẽ trở thành và là đầu ra tôi mong đợi.

https://github.com/twitter/bootstrap/issues/2093 hiển thị "chiều rộng: tự động" làm tính năng dự định. Tôi đang làm gì sai ở đây?

Answer 1

<div class="navbar navbar-static-top navbar-inverse"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <ul class="nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     </ul> 
    </div> 
    </div> 
</div> 

này nên làm điều đó

Answer 2

Nếu bạn nhìn vào Bootstrap basic nav bar example, bạn sẽ thấy rằng có một lề ở hai bên của thanh điều hướng. Điều này là do đối với một thùng chứa không chứa chất lỏng, trang của bạn sẽ chiếm một chiều rộng cố định và thanh điều hướng sử dụng chiều rộng đó.

Nếu bạn muốn thanh điều hướng mở rộng trên toàn bộ trang, bạn cần sử dụng class="container-fluid" nhưng trong bố cục linh hoạt, các mục menu (theo mặc định) sẽ chảy từ bên trái của trang.

Trong mã của bạn, bạn đang sử dụng cả hai container và container-fluid không chính xác và theo tài liệu Bootstrap, bạn cần đặt nav trong vùng chứa - không nhúng vùng chứa trong thẻ điều hướng của bạn.

Answer 3

Tôi đã giải quyết vấn đề này bằng cách xóa định nghĩa width: auto từ .navbar .container trong bootstrap.css.

Không phải là giải pháp lý tưởng (chỉnh sửa bootstrap.css nói chung) nhưng đơn giản hơn nhiều so với áp dụng tất cả độ rộng đáp ứng cho công cụ chọn.

Answer 4

Tôi tìm thấy một giải pháp cho vấn đề trên.

Thêm navbar-fixed-top lớp vào chính navbar div.

Và thêm

.navbar-fixed-top{ 
position: relative; 
} 

cho quy tắc css của bạn.

Điều này hạn chế menu kéo nó sang trái và làm việc tốt trong khi tôi đang phát triển một chủ đề cho wordpress.