Zurb можно получить полную ширину строки

Ответ 1

Я столкнулся с той же проблемой вчера. Фокус в том, что для блоков с полной шириной перекрытия вы просто не вмещаете их в структуру строк/столбцов, так как строка/столбец всегда будет применять заполнение по умолчанию. Держите нижние и нижние колонтитулы самостоятельно и используйте в них строку/столбец.

<header>
    This will span the full width of the page
</header>
<div class="row">
    <div class="twelve columns">
        This text will flow within all typical padding and margins
    </div>
</div>
<footer>
    This will span the full width of the page
    <div class="row">
        <div class="twelve columns">
            This text will flow within all typical padding and margins
        </div>
    </div>
</footer>

Ответ 2

То, что я делал, это добавить пользовательский класс, чтобы я мог связать его с помощью .row и переопределить настройку максимальной ширины.

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

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

Я также помещаю здесь ширину, чтобы покрыть базы, но она уже объявлена ​​в файле foundation.css, поэтому вы можете просто опустить ее.

Ответ 3

Если вы используете Zurb Foundation Framework, просто удалите класс row и оберните элемент в классе container, который составляет 100% ширины. Теперь вы, вероятно, хотите сосредоточить материал, используйте класс centered следующим образом:

<div class="container navigation">
    <div class="centered">
        Some navigation stuff
    </div>
</div>

Ответ 4

Я полностью не согласен с ответом. Вы не должны использовать! Important

Пожалуйста, обратитесь к моей статье и демо на http://edcharbeneau.github.com/FoundationSinglePageRWD/

Вы должны быть в состоянии получить то, что вам нужно оттуда. Демо-версия для 2.2, но очень похожа на функцию v3.

Ответ 5

Используйте "Раздел", как в:

<section>
  <div class="row">
   <div class="small-12 columns">
   </div>
  </div>
</section>

Затем назначьте идентификатор разделу и используйте его для фона.

Ответ 6

Я знаю, что ответов уже много, но я думаю, что у меня есть что-то новое, чтобы добавить в эту тему, если кто-то использует Foundation 5 и наткнулся на этот вопрос (например, я).

Поскольку Foundation использует единицы REM, лучше было бы изменить класс .row, используя их, и добавив дополнительный класс, чтобы вы могли иметь только выбранные строки в полноэкранном режиме. Например, используя .full класс:

.row.full {
    max-width: 80rem;  /* about 90rem should give you almost full screen width */
}

Вы можете видеть, что он используется так же даже на странице документации Zurb Foundation (они изменили класс .row): http://foundation.zurb.com/docs/ (просто посмотрите на исходный код страницы)

Ответ 7

Фонд 6 поддерживает эту функцию естественным образом с помощью row expanded. Пример кода:

<div class="expanded row">
    ...
</div>

Подробнее здесь: http://foundation.zurb.com/sites/docs/grid.html#fluid-row

Ответ 8

Просто переопределите свойство max-width как max-width: initial;, например,

    .fullWidth {
       width: 100%;
       margin-left: auto;
       margin-right: auto;
       max-width: initial;
    }

<div class="row fullWidth"> </div>

это работает для меня:)

Ответ 9

Это относится к Foundation 5. Ни один из ответов, данных до сих пор, не обеспечивает сквозную ширину. Это потому, что внутренний .columns добавить дополнение.

Для истинного содержимого полной ширины, добавьте это в свой CSS.

.row.full { width: 100%; max-width: 100%; }
.row.full>.column:first-child,
.row.full>.columns:first-child { padding-left: 0; }
.row.full>.column:last-child,
.row.full>.columns:last-child { padding-right: 0; }

Просто добавьте класс .full к .row, который вы хотите расширить ширину.

<div class="row full">
  <div class="medium-6 column">This column touches Left edge.</div>
  <div class="medium-6 column">This column touches Right edge.</div>
</div>

Ответ 10

Вам действительно хотелось бы сохранить класс строк, иначе вы потеряете большую часть сетевой системы. Почему бы не изменить настройку для $rowWidth от 1000 (по умолчанию) до 100%. Это можно найти в файле foundation_and_overrides.scss

Ответ 11

Просто установите

$row-width: 100%;

http://foundation.zurb.com/forum/posts/927-full-width-layouts

Ответ 12

Я не уверен, что мне что-то не хватает, но мне нужно было добавить div .row для .centered. Я могу по-прежнему стирать .header, чтобы иметь полноэкранный фон в этом случае, но метод .container не работал у меня.

<header class="header">
  <div class="row">
    <div class="centered">
       Logo and stuff
    </div>
  </div>

  <div class="row">
    Some navigation stuff   
  </div>
</header>

Ответ 13

Если вы не даете ему класс "row" и помещаете в него столбцы, он работает на 100% ширине

Ответ 14

Если вы используете sass, это лучший способ:

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

.row{
    &.full-width{ 
        width: 100%; 
        max-width: 100%!important; //might be needded depending on your settings
        &>.column:first-child,
        &>.columns:first-child{ 
            padding-left: 0; 
        }
        &>.column:last-child,
        &>.columns:last-child{ 
            padding-right: 0; 
        }
    }
}

Ответ 15

да, просто используйте вот так:

  <div class="large-12 columns">

    <h2>Header Twelve Columns (this will have full width of the BROWSER <---->></h2>

  </div>