Класс полной ширины - основа основания

Question

первый пользователь Foundation framework, я разработал все свои предыдущие сайты с Bootstrap, но теперь я вынужден создать один веб-сайт с основанием. Я заметил, что они очень похожи, но как-то разные рамки.

У меня возникла проблема и надеюсь, что вы можете мне помочь.

мне нужно добавить баннер на сайт, который всю ширину и текст, который находится в пределах сетки и имеет Б.Г., который также всю ширину, посмотреть, что я имею в виду здесь:

Здесь мой HTML:

<div class="fullWidth"> 
     <div class="banner"> 
      <div class="logo"> 
       <a href="#"><img src="images/logo.svg"/></a> 
      </div> 
      <div class="row"> 
       <div class="bg-tagline"> 
       <h1 class="tagline">some text here</h1>    
       </div> 
      </div>   
     </div> 
    </div> 

и CSS:

.fullWidth { 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    max-width: initial; 
} 
.banner { 
    background: white url("images/baner.jpg") no-repeat center; 
    height: 590px; 
    background-size: cover; 
    position: relative; 
} 
.logo { 
    position: relative; 
    padding: 1%; 
    height: 5em; 
    width: 5em; 
} 
.bg-tagline { 
    color: #fff !important; 
    background-color: white; 
    width: 100%; 
    margin: 0px auto; 
} 
.bg-tagline h1 { 
    color: #fff !important; 
    font-size: 1.2em; 
    text-align: center; 
} 

Answer 1

Насколько я знаю, нет «полная ширина» класс в фундаменте; Как правило, в этих типов компоновки, я бы просто использовать элементы от структуры, например:

<header id="banner"> 
    <div class="slogan">Your text banner here</div> 
</div> 

И, конечно, некоторые CSS, как вы уже. Если вам нужно что-то разработанное (например, макет с использованием классов фундамента), я бы разместил внутри div.slogan a div.row и начал строить макет оттуда, конечно, что строка будет ограничена максимальной шириной от рамки.

BTW, если вам нужно, чтобы весь каркас имел более широкую ширину для строк, вы можете изменить настройки рамок и повторно скомпилировать.

Answer 2

Лично я хотел бы сделать вспомогательный класс для строк:

.row.fullwidth { 
    max-width:100em; // set your override width here 
    margin: 0 auto; 
} 

Таким образом, всякий раз, когда мне нужна полная ширина секции Я просто сделать:

<div class="row fullwidth"> 
    <!--- content ---> 
    </div>