Вопрос по css, html5, frameworks, responsive-design, media-queries – Zurb Foundation 3 - Разделы полной ширины и изменение максимальной ширины?

6

Я используюZURB Foundation 3 по моему проекту. Я люблю грид-системы и адаптивные сайты, но моя проблема в том, что я все еще твердо верю, что они должны быть построены шире, чем 1000 пикселей.

У меня есть несколько вопросов:

1) Во-первых, я хотел бы сделать определенные разделы (div) полной шириной. Теперь я прочитал, я могу просто заменить с например, и это будет генерировать этот эффект. Теперь по какой-то причине это кажется неправильным, я должен просто создать свой собственный класс, который будет иметь полную ширину, или какой будет правильный способ сделать это?

2) Я хотел бы, чтобы он был основан на большем разрешении, может быть, максимальная ширина 1440 пикселей или даже полная ширина на 100%. Как я могу это сделать, и / или Foundation не является для меня подходящей основой? Мне нравится тот факт, что он поставляется со всеми шаблонами, поэтому очень быстро и дружелюбно делать макеты.

Заранее спасибо.

Проектирование для определенной ширины вступает в противоречие с целой концепцией адаптивного дизайна. cimmanon
@ cimmanon он не былНе спрашивая, как создать конкретную ширину, он спрашивал, как установить максимальную ширину дизайна, предоставляемую в платформе Foundation. Макс-ширина! = Ширина Ed Charbeneau
Да, я понимаю, но вместо по умолчанию "Максимальная ширина" например, 1000px или 960, я бы предпочел увеличить значение по умолчанию до 1440px и т. д. Это не должно влиять на скорость отклика. Не стесняйтесь, чтобы разъяснить мне, почему они всегда имеют максимальную ширину 940-1000 пикселей? matt

Ваш Ответ

3   ответа
1

$row-width: rem-calc(1000); работал на меня

7

е редактировать файл _settings.scss. Раскомментируйте $ row-width: emCalc (some_number.px); на ширину строки выЯ хотел бы использовать.

11

Обновить: Пожалуйста, прекратите голосовать за этот пост. Рамки значительно изменились с момента ответа на вопрос. Если вы используете Foundation 4 или выше, просмотрите обновленные ответы и проголосуйте за них.

Только для ранних версий Foundation 3 Добавьте следующее переопределение к вашему CSS (это должно появиться после или в конце foundation.css)

.row {
     width: 100%;
}

Это переопределит настройки по умолчанию для фреймворка и сделает дизайн полноэкранным. Не стесняйтесь изменять это значение в соответствии с вашими потребностями.

Существует также индивидуальная загрузка доступна наhttp://foundation.zurb.com/download.php (который, вероятно, делает то же самое, переопределяет или заменяет ширину .row)

Я не уверен, как будет работать добавление нового класса .full-row. Есть несколько классов CSS, которые используют свои селекторы в классе .row. Я бы ознакомился с foundation.css, прежде чем применять это изменение. Ed Charbeneau
Итак, чтобы расширить это, как я могу сделать только заголовок полной ширины? matt
может также помочь просто создать класс .full, если вы хотите, чтобы только определенные строки были на 100%. то есть. класс =»строка полная " Marconi
Если ты'вы работаете в Foundation 4 (что многие люди, которые в конечном итоге в этом вопросе могут быть в настоящее время), вы 'Вам нужно будет использовать минимальную ширину, а не ширину: .row {min-width: 100%! важный; } Sinister Beard

Похожие вопросы