Làm cách nào để tạo các hàng trong Zurb Foundation 4/5 toàn màn hình?

Question

Theo mặc định, các hàng trong Zurb Foundation 4 và 5 chạy ở độ rộng tối đa 1000px, ngay cả trên màn hình rất lớn, tạo ra các lề ở hai bên của nội dung. Làm thế nào để làm cho nó chạy ở chế độ toàn màn hình mà không ảnh hưởng đến khả năng đáp ứng của thiết kế?

Answer 1

Thêm đoạn mã sau vào file CSS:

Answer 2

Nếu bạn đang sử dụng Sass/Compass, các zurb-foundation đá quý, hoặc một bản phân phối Foundation tùy chỉnh, bạn có thể thiết lập các biến $row-width. Điều này sẽ chảy qua bất cứ nơi nào khác nó được sử dụng. Bạn cũng có thể điều chỉnh, ví dụ: số cột, chiều rộng máng xối, v.v.

Đáy của tài liệu lưới giải thích thêm: http://foundation.zurb.com/docs/components/grid.html

Answer 3

Tôi nghĩ rằng cách tốt nhất để làm điều này là như thế này.

Thêm này vào css của bạn hoặc một tùy chỉnh css-

.row.full-width { 
    width: 100%; 
    max-width: 100%; 
} 

Sau đó, trong html của bạn, làm this-

<div class="row full-width"> </div> 

này sẽ cho phép bạn để giữ cho hệ thống lưới trong sự khéo léo trong sự kiện này bạn chỉ muốn sử dụng toàn màn hình cho đầu trang hoặc chân trang.

Answer 4

<div class="row"> 
    <div class="large-6 columns"></div> 
    <div class="large-6 columns"></div> 
</div> 

này sẽ cung cấp cho chiều rộng 1000px

<div class="large-6 columns"></div> 
<div class="large-6 columns"></div> 

nhưng nếu bạn sử dụng lớp cột mà không có lớp hàng các bạn sẽ nhận được toàn màn hình ...