2012-10-11 18 views
6

Im sử dụng ZURB Foundation 3 trên một dự án của tôi. Tôi yêu các hệ thống lưới điện và các trang web đáp ứng nhưng vấn đề của tôi là tôi vẫn tin rằng chúng sẽ được xây dựng rộng hơn 1000px.Zurb Foundation 3 - Chiều rộng toàn phần và thay đổi chiều rộng tối đa?

Tôi có một vài câu hỏi:

1) Trước hết tôi rất thích làm cho phần nhất định (div) đầy đủ chiều rộng. Bây giờ tôi đã đọc tôi chỉ có thể thay thế <div class="row"> với <div class="container"> ví dụ và nó sẽ tạo ra hiệu ứng đó. Bây giờ vì một lý do nào đó điều này không cảm thấy đúng, tôi có nên tạo lớp của riêng mình với chiều rộng đầy đủ hay không, hay đó là cách thích hợp để làm điều này?

2) Tôi rất muốn có nó dựa trên độ phân giải lớn hơn, có thể rộng tối đa 1440px hoặc thậm chí là chiều rộng toàn bộ 100% chất lỏng. Làm thế nào tôi có thể đi về việc này, và/hoặc là nền tảng không phải là khuôn khổ chính xác cho tôi? Tôi thích thực tế nó đi kèm với tất cả các mẫu như vậy là siêu nhanh và thân thiện để làm mockups.

Xin cảm ơn trước.

+0

Thiết kế cho chiều rộng cụ thể xung đột với toàn bộ khái niệm thiết kế đáp ứng. – cimmanon

+1

Có, nhưng thay vì mặc định "chiều rộng tối đa" 1000px hoặc 960 ví dụ tôi thà tăng mặc định lên 1440px vv Điều này sẽ không ảnh hưởng đến khả năng phản hồi. Vui lòng giải thích cho tôi lý do tại sao họ luôn có xu hướng có chiều rộng tối đa là 940-1000px? – matt

+0

@cimmanon, ông đã không hỏi làm thế nào để tạo ra một chiều rộng cụ thể, ông đã hỏi làm thế nào để thiết lập chiều rộng thiết kế tối đa được cung cấp trong khuôn khổ Foundation. Chiều rộng tối đa! = Width –

Trả lời

11

Cập nhật: Vui lòng ngừng bỏ phiếu cho bài đăng này. Khung đã thay đổi đáng kể kể từ khi câu hỏi được trả lời. Nếu bạn đang sử dụng Nền tảng 4 trở lên, vui lòng xem câu trả lời được cập nhật và bỏ phiếu cho họ.

Đối với phiên bản ban đầu của Quỹ 3 chỉ Thêm ghi đè sau để CSS của bạn (Điều này phải xuất hiện sau hoặc vào cuối foundation.css)

.row { 
    width: 100%; 
} 

này sẽ ghi đè mặc định với các khuôn khổ và làm cho thiết kế đi toàn màn hình. Hãy thay đổi giá trị này cho phù hợp với nhu cầu của bạn.

Ngoài ra còn có một download tùy chỉnh có sẵn tại http://foundation.zurb.com/download.php (mà có lẽ làm điều tương tự, ghi đè hoặc thay thế .row chiều rộng)

+1

Cảm ơn bạn tuyệt vời, lý tưởng nhất là tôi chỉ có thể tạo một lớp mới có tên ".full-row" chẳng hạn và chỉ làm cho 100% cũng chính xác? Tôi đã xem phiên bản tải xuống tùy chỉnh, nhưng nó cho biết chiều rộng tối đa và tôi giả định đó chỉ dành cho phiên bản di động ... vì giá trị của hàng với tôi có vẻ là 1000px và chiều rộng tối đa tải xuống mặc định là 940px. – matt

+0

Tôi không chắc chắn cách thêm một lớp .full-row mới sẽ hoạt động. Có một số lớp CSS mà piggyback bộ chọn của họ ra khỏi lớp .row. Tôi sẽ kiểm tra foundation.css trước khi thực hiện thay đổi đó. –

+0

Vui lòng đánh dấu câu trả lời này là câu trả lời nếu nó giải quyết được vấn đề của bạn. Cảm ơn. –

7

Editing/nền tảng quan trọng nhất là dễ dàng. Trong Foundation 4 bạn có thể chỉnh sửa tập tin _settings.scss của bạn. Bỏ ghi chú $ row-width: emCalc (some_number.px); với chiều rộng hàng bạn muốn sử dụng.

1

Bỏ ghi chú $row-width: rem-calc(1000); làm việc cho tôi