Bourbon/Neat - Как вырваться из сетки, чтобы отобразить строку на всю ширину браузера?

Я привык делать этот трюк в Bootstrap 3, чтобы временно вырваться из сетки и показать строку во всю ширину браузера (полезно для строк, которым нужен цветной фон во всю ширину):

<div class="container" style="background-color:red">
    <div class="row">
        <div class="col-xs-12">

            <div class="container">
                <div class="row">
                    <div class="col-xs-12">

                        Content is displayed within the normal grid here 
                        but within a full-width red background.

                    </div>
                </div>
             </div>

         </div>
     </div>
 </div>

Есть ли способ сделать это в Bourbon/Neat?

В настоящее время я справляюсь с этим, устанавливая отдельные стили для своих основных элементов, а не для контейнера div:

header,
main,
footer {
    @include outer-container;
}

и в контейнере, который я хочу иметь во всю ширину:

nav {
    @include outer-container(100%);
}

но мне интересно, есть ли простой способ сделать это на внутренних вложенных элементах.


css twitter-bootstrap bourbon neat
person Natacha Beaugeais    schedule 25.01.2016    source источник
comment
Я боролся с этим на днях. Мое решение (не идеальное) состояло в том, чтобы увеличить максимальную ширину внешнего контейнера. @include outer-container(2160px);. Пища для размышлений.   -  person alecdwm    schedule 11.05.2016

Ответы (1)


arrow_upward
0
arrow_downward

Вот что я сделал для нижнего колонтитула:

HTML

  <footer>
      <div class="wrapper">

       </div>
 <footer>

CSS

footer{
  background: $lightest-grey;
}

.wrapper{
  @include outer-container;
}

Внешний контейнер (.footer-wrapper) будет центрирован на 100% от максимальной ширины. Может быть, это поможет вам. Вы можете использовать .wrapper где угодно. например заголовок, герой, ваш основной контейнер. Надеюсь это поможет

person Samuel    schedule 31.05.2016