Эй, ребята, я новичок здесь. Я изучаю базу Zurb, и мой вопрос заключается в том, как я могу увеличить ширину по умолчанию строки в структуре. как сетка 960 имеет 960 px. как я могу увеличить желание строки до 1200 пикселей, так что Должен ли я добавить пользовательскую таблицу стилей? пожалуйста, помогите, спасибо.Как увеличить ширину строки в zurb Foundation?
Вам не обязательно использовать !important. Просто поместите ваш новый CSS скажет app.css -below foundation.css и использовать следующее:
.row {
max-width: .px;
}
Вы также можете использовать другой класс и добавить это свойство, так что это не будет противоречить ряду по умолчанию.
Переопределите свойство max-width вашего класса .row и установите его по желаемой ширине.
.row {
max-width: ...px !important;
}
Если you'r с помощью SASS, поиск сетки переменных в documentation, где вы найдете информацию о том, как переопределить ширину строки, водосточные ширину и многое другое.
$row-width: em-calc(1000);
Лучше никогда не использовать '! Important' и узнавать о специфике CSS. У Smashing mag есть блестящая статья об этом. Http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ –
Правда, вы всегда можете переопределить его, включив в себя .row { } после стилей Css Foundation - и, таким образом, не важно! Или просто используйте SASS. :) PS. даже ZURB использует много важного; в их рамках - поэтому это может быть полезно в некоторых случаях. –
Лучше всего перейти к _settings.scss файл фонда в вашем проекте, проверьте онлайн, если у вас нет файла _settings.css или если вы не знаете его местоположение, пожалуйста. просто откройте и найдите это
$row-width: rem-calc(980); //change up to what you want
, и это верхнее значение будет генерировать ширину строки, как показано ниже i.e 61.25rem.
/* line 228, ../../bower_components/foundation/scss/foundation/components/_grid.scss */
.row {
margin: 0 auto;
max-width: 61.25rem;
width: 100%;
}
но теперь, если вы измените эту строку на ширину от 980 до чего-то вроде 1280, как пример ниже
$row-width: rem-calc(1280);
, то вы можете увидеть ниже, что мой CSS генерируется автоматически с новой максимальной ширины
/* line 228, ../../bower_components/foundation/scss/foundation/components/_grid.scss */
.row {
margin: 0 auto;
max-width: 80rem;
width: 100%;
}
Будьте осторожны с этими настройками, потому что вы можете существенно изменить внешний вид и расположение всего сайта.
Foundation 6 представляет класс .expanded, чтобы сделать ширину жидкости: http://foundation.zurb.com/sites/docs/grid.html#fluid-row
Он по-прежнему приводит к проблемам с отступа, хотя, не знаю, как это исправить.
Идеальное решение! – Switchfire
@Switchfire благодарит приятеля. – designerNProgrammer
Это работает, но в моем случае он также ограничивал максимальную ширину строки полной ширины, поэтому, если у вас есть полные строки ширины в макете, вы можете сбросить значение .row.full-width до 100% – vtacreative