максимальная установка ширины не работает для строки

Question

Я использую ZF6. Я использую версию SASS. теперь создал новую строку. это ширина устанавливается в

max-width: 75rem; 

Я попытался изменить ширину строки в css, но он не работает. Я также попытался изменить настройку переменной в файле SCSS, но это не сработало. Пожалуйста, скажите мне, как можно это исправить. спасибо.

Answer 1

Если вы хотите row с width, равной ширине всего вида-порта, то вы можете использовать:

<div class="row expanded"> 

Если вы используете дваcss файлы, проверить порядок, в котором у вас есть упомянутые ваши foundation.css или foundation.min.css и ваши app.css или custom.css. former должен следовать за latter, а не наоборот.

Если ничего не работает, вы можете попробовать:

.row 
{ 
    max-width: 80rem !important; 
} 

Answer 2

Если я правильно понимаю, вы пытаетесь создать пользовательскую строку с настраиваемой шириной?

Для этого вы можете использовать свой собственный класс и включить grid-row, а затем добавить свой собственный max-width.

Если это ваш HTML:

<div class="custom-row-class"> 
</div> 

Затем в файле SCSS, написать

.custom-row-class { 
    @include row-width(); 
    max-width: 75em; 
} 

Просто надо знать, что если ваша строка находится внутри другого, содержащего div он не сможет получите больше, чем это, потому что ваш пользовательский div имеет max-width, который сжимается до содержащего div и width: 100%, который также будет сжиматься, чтобы соответствовать содержащему div.

Некоторые ссылки на документацию. Я считаю, что документ Foundation 5 немного легче понять. Также ознакомьтесь с файлом _grid.scss для получения дополнительной информации.

http://foundation.zurb.com/sites/docs/v/5.5.3/components/grid.html#customize-with-sass

http://foundation.zurb.com/sites/docs/grid.html#building-semantically