Кто-нибудь знает, как вы собираетесь сосредоточить контент на полной ширине, используя Zurb Foundation?
В настоящее время у меня есть:
HTML
<div class="row full-width nav-back">
<div class="row large-12 column">
<!-- CONTENT -->
</div>
</div>
CSS
.nav-back{
height:80px;
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #004B91),
color-stop(1, #002952));
background-image: -o-linear-gradient(bottom, #004B91 0%, #002952 100%);
background-image: -moz-linear-gradient(bottom, #004B91 0%, #002952 100%);
background-image: -webkit-linear-gradient(bottom, #004B91 0%, #002952 100%);
background-image: -ms-linear-gradient(bottom, #004B91 0%, #002952 100%);
background-image: linear-gradient(to bottom, #004B91 0%, #002952 100%);
}
Это приводит к тому, что содержимое внутри "большого-12 столбца" растягивается на 100% так же, как родительский контейнер "полная ширина",
Есть ли способ сосредоточить контент, содержащийся внутри столбца "большой-12"?
Благодаря :-)
Вы пытались удалить строку во вложенном контейнере столбца?
<div class="row full-width nav-back">
<div class="large-12 columns"><!-- CONTENT --></div>
</div>
Также может быть, что .full-width
отвечает за 100% строки. Обычно строка имеет максимальную ширину, которая центрирует ваш контент при превышении. В фундаменте docs его max-width: 80rem;
, Таким образом, вы можете попробовать без полной ширины.
<div class="row nav-back">
<div class="large-12 columns"><!-- CONTENT --></div>
</div>
С.больше-центрированным вы также можете центрировать меньшую колонку подряд, так как 12 столбцов (большой-12, средний-12 и т.д.) Обычно составляют 100%.
<div class="row full-width nav-back">
<div class="large-10 large-centered columns"><!-- CONTENT --></div>
</div>