Bootstrap 100% width/Full width

Question

Tôi muốn tạo một trang web mới với Bootstrap và tôi cần nó có chiều rộng 100%, nhưng tôi không muốn nó là chất lỏng. Ít nhất là không phải bây giờ.

Vấn đề tôi gặp phải là: sử dụng tiêu chuẩn bootstrap giới hạn 960px và bố cục lỏng có chiều rộng đầy đủ nhưng hoạt động như bố cục lỏng nên di chuyển các phần tử để xếp chồng lên nhau khi cửa sổ bị thu hẹp kích thước.

Có cách nào để có chiều rộng 100% với bố cục khởi động tĩnh không?

Answer 1

100% chiều rộng ... tĩnh

Đây là một chút của một nghịch lý. Bố cục chiều rộng 100% không tĩnh.

Bootstrap sử dụng lớp .container để đặt chiều rộng được xác định trước. Tăng này lên chiều rộng trang mong muốn của bạn nếu bạn muốn nó lớn hơn mặc định của nó. Hãy cẩn thận mặc dù kích thước của các lớp học span* và offset* của Bootstrap sẽ cần độ rộng của chúng được điều chỉnh cho phù hợp.

Answer 2

Tôi đoán ý bạn là bạn không muốn lề/đệm ở hai bên. (đó là cách duy nhất mà thông điệp của bạn có ý nghĩa - chiều rộng 100% sẽ có kích thước đầy đủ của màn hình để không bao giờ bị tĩnh - kích thước sẽ thay đổi tùy thuộc vào cửa sổ lớn đến mức nào)

Chúng tôi không có một trường hợp sử dụng hoặc JSFiddle từ bạn vì vậy tôi không thể cung cấp cho bạn mã chính xác nhưng bạn cần đảm bảo rằng phần thân của bạn có lề: 0 và đệm: 0 và sau đó tìm kiếm các div khác bằng công cụ Firebug hoặc Chrome Web Dev.

Nếu bạn muốn bố cục của mình là chất lỏng nhưng dừng tại một điểm nhất định, bạn cần áp dụng chiều rộng tối đa: 1000px (ví dụ) vào phần thân hoặc phần tử thùng chứa/trình bao chung của bạn.

Answer 3

Chỉ cần không bao gồm bootstrap-responsive.css để tắt chức năng đáp ứng.

Nếu bạn không muốn .container máng xối/lề, bạn có thể đặt nội dung bên ngoài vùng chứa nhưng lưu ý rằng bạn phải duy trì bố cục nội dung của mình (vẫn có thể sử dụng lưới nhưng mất khả năng căn giữa nội dung) và đừng quên hầu hết các thành phần Bootstrap như .navbar cần .container để kiểm soát chiều rộng của nó.

Một trong những tác phẩm của tôi cần băng chuyền toàn màn hình để giữ tất cả nội dung vì vậy tôi đã bọc nội dung của mình với .container để căn giữa nội dung.

Answer 4

này rất dễ dàng để đạt được trong Bootstrap 3, chỉ cần thay thế các .container div với riêng bạn:

.my-fluid-container { 
    padding-left: 15px; 
    padding-right: 15px; 
    margin-left: auto; 
    margin-right: auto; 
} 

Nhờ Erik Flowers cho heads-up: http://www.helloerik.com/bootstrap-3-grid-introduction#fluid

CẬP NHẬT

Bootstrap 3 giờ đây cung cấp lớp chứa chất lỏng tích hợp, chỉ cần sử dụng <div class="container-fluid">.See docs.

Answer 5

tôi có thể không hoàn toàn tìm ra cách để trả lời cho câu hỏi chính, nhưng đây là những gì bạn muốn OP

Như đã nói ở trên, không sử dụng .container, sử dụng lớp riêng của bạn như:

.my-fluid-container { 
    padding-left: 15px; 
    padding-right: 15px; 
    margin-left: auto; 
    margin-right: auto; 
} 

Sau đó, khi bạn xây dựng lưới, chỉ cần sử dụng col-xs- * cho các cột. Bây giờ bạn sẽ có một trang web có chiều rộng 100% không chồng trong chế độ xem "di động". Chào mừng đến với những năm 90;)