2014-04-14 20 views
21

Tôi đang cố gắng tìm ra Bootstrap 3 và gặp nhiều rắc rối. Trang web Bootstrap 3 cho biết:Tôi chỉ có một thùng chứa Bootstrap 3?

Dễ dàng căn giữa nội dung của trang bằng cách gói nội dung của nó vào .container. Vùng chứa đặt độ rộng tại các điểm ngắt truy vấn phương tiện khác nhau để phù hợp với hệ thống lưới của chúng tôi.

Lưu ý rằng, do độ rộng đệm và chiều rộng cố định, các vùng chứa không thể ẩn theo mặc định.

Dòng cũ dường như hỗ trợ điều này, vì tôi không muốn các vùng chứa lồng nhau đặt lại chiều rộng thành nhiều hơn so với bố mẹ. Dòng thứ hai đó khiến tôi nghĩ rằng tôi chỉ nên có một thùng chứa trên một trang (hoặc anh chị em nhiều nhất), bất kể chất lỏng/bình thường/etc, mà không làm gì đó "thêm".

Điều đó có đúng không?

Trả lời

32

Bạn chính xác ở chỗ bạn không muốn lồng các .containers. Tuy nhiên, có rất nhiều trường hợp bạn sẽ có nhiều thùng chứa. Ví dụ: nếu bạn muốn có phần tử chiều rộng đầy đủ (chiều rộng màn hình, không phải chiều rộng vùng chứa). Đây là hoàn toàn tốt đẹp:

<div class="container"> 
    <div class="col-md-12"> 
    <p>Content</p> 
    </div> 
</div> 

<div id="full-width-element"> 
    <p>Other content, stretching full width of the page</p> 
</div> 

<div class="container"> 
    <div class="col-md-12"> 
    <p>Content</p> 
    </div> 
</div> 

Hãy xem các ví dụ trên trang web Bootstrap: http://getbootstrap.com/getting-started/#examples, họ sử dụng nhiều .containers là tốt.

Vì vậy, thùng chứa làm tổ không phải là ý tưởng hay nếu không sửa đổi hoặc cân nhắc cẩn thận. Sử dụng nhiều thùng chứa là tốt (nếu không nó phải là một ID thay vì một lớp học)!

+0

Có, nhưng đây là những anh chị em ruột và không lồng nhau, đó là những gì tôi đã suy nghĩ. Cảm ơn bạn! – Josh

+8

Có, các tài liệu nói không chứa tổ. Sau đó, họ đi trước và lồng container trong các ví dụ (xem: http://getbootstrap.com/examples/navbar/). – Chuck

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