Nhiều và/hoặc thùng chứa Bootstrap lồng nhau?

Question

My sự hiểu biết là tất cả các phần tử theo kiểu Bootstrap phải tồn tại bên trong phần tử <div class="container">. Nhưng đôi khi tôi xem các ví dụ Bootstrap, nơi có nhiều "container":

<div class="container"> 
    <!-- Blah, GUI stuff, blah --> 
</div> 

... 

<div class="container"> 
    <!-- Blah, more GUI stuff, blah --> 
</div> 

Câu hỏi của tôi:

1. Khi bạn đã bao giờ cần một trang HTML đơn với nhiều "div container"? Lợi ích này cung cấp như trái ngược với chỉ đưa toàn bộ cơ thể bên trong một "div container" lớn?
2. Bạn có bao giờ muốn làm tổ "các div chứa" bên trong các div khác không? Khi nao tại sao?

Answer 1

1. Một số phần của trang sẽ kéo dài chiều rộng khung nhìn đầy đủ và những người khác sẽ không. Một số hình nền sẽ có chiều rộng đầy đủ nhưng nội dung sẽ không.

   Một ví dụ của việc này là một khu vực featurette trong đó có một hình nền hoặc màu đó là toàn bộ chiều rộng của khung nhìn nhưng nội dung bên trong đó, các hình thức hoặc bất cứ điều gì, không vượt quá .container tại bất kỳ chiều rộng khung nhìn nhất định.

2. Bạn không làm tổ .container hoặc .container-fluid - xem docs. Nó không cần thiết.

   Documents: Bootstrap yêu cầu phần tử có chứa để bọc nội dung trang web và nhà hệ thống lưới của chúng tôi. Bạn có thể chọn một trong hai vùng chứa để sử dụng trong các dự án của mình. Lưu ý rằng, do padding và nhiều hơn nữa, không phải thùng chứa có thể chứa được [không có nghĩa là .container và .container-fluid KHÔNG được lồng nhau].

Answer 2

Trên thực tế nó hoàn toàn phụ thuộc vào yêu cầu của nhà thiết kế.

Một số lần bạn cần toàn bộ chiều rộng của dòng (i có nghĩa là để nói viewport hoặc một dải phần dễ thấy rằng bạn có thể đạt được mà không cần lớp container riêng biệt)

http://binarytheme.com/demos?theme=bootsrap-landing-page-blue

xem ở trên mẫu ví dụ để hiểu

Answer 3

Không giống như những gì một số người đã nói, bạn có thể lồng một container-fluid bên trong một container. Thậm chí còn có một ví dụ trên trang web bootstrap chính thức:

http://getbootstrap.com/examples/navbar/