Cấu trúc của thanh điều hướng Bootstrap 3 là gì?

Question

Trong khi tài liệu Bootstrap rất tốt, tôi không thể hiểu cấu trúc thanh điều hướng chỉ từ một ví dụ trong số documentation. Tôi đang cố gắng hiểu các thành phần phụ của thanh điều hướng là gì và cách sử dụng chúng. Theo như tôi có thể nói, có hai khu vực của thanh điều hướng: một tiêu đề và một vùng thu gọn. Tiêu đề dường như là nơi để đặt tên thương hiệu (bên trái) và nút bật tắt ở bên phải. Nó cũng có vẻ như khu vực sẽ luôn luôn được hiển thị. Thu gọn dường như là khu vực dành cho mọi thứ khác và sẽ bị thu gọn cho chiều rộng nhỏ hơn.

1. Đây có phải là sự hiểu biết chính xác không? Có khu vực nào khác không?
2. Mục đích của trình bao bọc chứa chất lỏng là gì? Điều gì sẽ xảy ra nếu trình bao bọc này bị xóa?
3. Loại yếu tố nào có thể đi vào từng khu vực?
4. Điều gì sẽ xảy ra nếu tôi không cần bất kỳ phần có thể thu gọn nào? Tôi có nên đặt mọi thứ vào tiêu đề không?
5. Điều gì sẽ xảy ra nếu tôi cần ba phần không thể thu gọn: trái, giữa và phải?

Vui lòng trợ giúp.

P.S. Trong khi tài liệu Bootstrap là rất tốt, tôi ước rằng các thành phần sẽ được ghi lại bằng cách sử dụng một số loại biểu đồ xác định các thành phần con khác nhau và hành vi và sử dụng dự định của chúng.

Chỉnh sửa Tôi tìm thấy this tutorial trên thanh điều hướng Bootstrap có nhiều ví dụ hơn - nó thực sự rất hay. Tôi có thể lấy được các mẫu từ đó, nhưng sẽ rất tuyệt nếu ai đó có thể nói rõ hơn về chúng. Ví dụ, ví dụ đầu tiên trong hướng dẫn này có một div với tiêu đề navbar class, theo sau là một div không có lớp và chứa tất cả các liên kết. Điều này làm cho tôi nghĩ rằng người ta có thể thêm nhiều div trong thanh điều hướng khi cần thiết, navbar-header và navbar-collapse chỉ là các thành phần phụ mục đích đặc biệt.

Answer 1

Dựa trên lời khuyên @ bto.rdz, đây là giải pháp tôi đã đưa ra cho # 5 navbar với trái, phần giữa và bên phải:

<nav class="navbar navbar-inverse" role="navigation"> 

    <div class="container-fluid"> 

     <div class="row"> 
      <div class="col-xs-4 navbar-text"> 
       <a href="#" class="navbar-link">Left</a> 
      </div> 

      <div class="col-xs-4 navbar-text text-center"> 
       <a href="#" class="navbar-link">Middle</a> 
      </div> 

      <div class="col-xs-4 navbar-text text-right"> 
       <a href="#" class="navbar-link">Right</a> 
      </div> 
     </div> 

    </div><!-- /.container-fluid --> 
</nav> 

I figured rằng kể từ khi có một container chất lỏng bên trong thanh điều hướng, tại sao không tạo một hàng có 3 cột cho các liên kết bên trái, giữa và bên phải. Điều này gần như làm việc ngoại trừ việc nó đã được phá vỡ ở 768 pixel. Tôi truy tìm này để Bootstrap thêm 15px lề trái và phải tại điểm ngắt đó. Tôi overrode hành vi này như sau và bây giờ tôi có hành vi mong muốn ở tất cả các chiều rộng trình duyệt.

.navbar-text { 
    margin-left: 0; 
    margin-right: 0; 
}