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

82

Sự hiểu biết của tôi là tất cả các phần tử theo kiểu Bootstrap phải tồn tại bên trong một <div class="container">phần tử. Nhưng đôi khi tôi thấy các ví dụ Bootstrap trong đó có nhiều "vùng chứa":

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

...

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

Những câu hỏi của tôi:

  1. Khi nào bạn cần một trang HTML duy nhất có nhiều "div vùng chứa"? Ưu đãi này mang lại lợi ích gì so với việc chỉ đặt toàn bộ phần thân bên trong một "container div" lớn?
  2. Bạn có bao giờ muốn lồng "container div" bên trong những cái khác không? Khi nao tại sao?
css  twitter-bootstrap 
— bôi nhọ
nguồn
1
Nếu bạn đang sử dụng băng chuyền có chiều rộng đầy đủ, nó có các vùng chứa được sử dụng cho phụ đề, vì vậy nó không nên nằm trong vùng chứa. Do đó, bạn có thể có một thùng chứa bên trên nó và một thùng chứa bên dưới nó.
— Aibrean
1
Mặc dù @Christina đúng ở chỗ các tài liệu nói rằng bạn không lồng các vùng chứa, nhưng đôi khi nó được sử dụng và hữu ích. Xem stackoverflow.com/questions/29660034/… để biết thêm thông tin về lồng.
— gidmanma

Câu trả lời:

80

  1. Một số phần của trang sẽ mở rộng toàn bộ chiều rộng khung nhìn và những phần khác thì không. Một số hình nền sẽ có chiều rộng đầy đủ nhưng nội dung thì không.

    Ví dụ về điều này là một khu vực đặc trưng có hình nền hoặc màu bằng toàn bộ chiều rộng của khung nhìn nhưng nội dung bên trong đó, dạng hoặc bất cứ thứ gì, không vượt quá .containerbất kỳ chiều rộng khung nhìn nào đã cho.

  2. Bạn không lồng .containerhoặc .container-fluid- xem tài liệu . Nó không cần thiết.

    Tài liệu: Bootstrap yêu cầu một phần tử chứa để bao bọc nội dung trang web và chứa 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à hơn thế nữa, không có vùng chứa nào có thể lồng vào được [không có nghĩa là .container và .container-liquid KHÔNG được lồng vào nhau].

— Christina
nguồn
4
Tôi thường có một .container-fluidcái gì đó như thanh điều hướng hoặc biểu ngữ của một số loại trong khi trang web chính nằm bên trong a .container.
— DavidG
3
@DavidG Có, và sau đó bạn có đệm kép. Tài liệu: Bootstrap yêu cầu một phần tử chứa để bao bọc nội dung trang web và chứa 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 đệm và nhiều hơn nữa, không có vùng chứa nào có thể lồng vào nhau. getbootstrap.com/css
— Christina
1
@DavidG. Tôi không sử dụng .container-liquid trừ khi phần tử con trực tiếp là .row và các cột.
— Christina
1
Tôi cũng vậy, ý tôi là tôi sẽ có một thùng chứa chất lỏng với thanh điều hướng để nó chảy ra khỏi các cạnh của màn hình, sau đó sau thẻ đóng thùng chứa, hãy bắt đầu một thùng chứa không chất lỏng mới với nội dung chính.
— DavidG
1
Sự khác biệt lớn cần thực hiện ở đây - có thể chúng không nên được lồng trực tiếp , nhưng chúng có thể được lồng vào nhau và trong một số trường hợp cần phải được lồng vào nhau . Giả sử tôi có một div bảng đệm bên trong vùng chứa chính không phải là một hàng hoặc cột - trong trường hợp đó, tôi cần một .container-fluidlớp bao quanh các hàng / cột của tôi bên trong bảng điều khiển; nếu không, tôi sẽ nhận được một thanh cuộn ngang (trừ khi tràn bên trong bảng được đặt thành ẩn - nhưng tôi có thể không muốn điều đó, có lẽ tôi muốn một thanh cuộn nếu có nhiều dữ liệu bên trong, có thể là một bảng rộng).
— jbyrd
17

Không giống như những gì một số đã nói, bạn có thể lồng một container-fluidbên trong a 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/

— Từng chút một
nguồn
1
Trong trường hợp cuối cùng nội dung của liên kết đó thay đổi, thì đó là phiên bản 3.3 trong đó ví dụ bao gồm containerlồng ghép a container-fluid: view-source: getbootstrap.com/docs/3.3/examples/navbar
— Ryan
5

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ế.

Đôi khi bạn cần toàn bộ chiều rộng của hàng (ý tôi muốn nói là khung nhìn hoặc một dải phần có thể nhìn thấy mà bạn có thể đạt được mà không cần lớp vùng chứa riêng biệt)

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

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

— kiểm tra
nguồn
0

Tiết kiệm thời gian của bạn và chuyển sang Css-grid lưới CSS gốc.

Bộ chứa Bootstrap có một giới hạn, nếu bạn tìm kiếm giới hạn 12 cột, thử thách đệm 10 pixel, thêm vào đó không phải là bản gốc (CSS nội trang) nơi người dùng cần tải nó xuống máy của mình và trên hết là con số đó của lặn mà bạn cần xử lý.

Với tất cả những điều đó, hãy thử và chuyển sang CSS-grid, đây là một sân chơi tốt để bắt đầu.

Bây giờ đến nhược điểm của CSS-grid là vẫn chưa tương thích với IE.

— Feras
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.