Бурбон Чистый Нужен ли внешний контейнер?

Мне интересно, нужно ли @include outer-container?

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


page.html с внешним контейнером

<div class = "container">
    <div class = "box"></div>
</div>

page.scss с внешним контейнером

.container {
    @include outer-container;
    .box {
        @include span-columns(6);
    }
}

page.html без внешнего контейнера

<div class = "box"></div>

page.scss без внешнего контейнера

.box {
    @include span-columns(6);
}

Оба они приводят к одному и тому же эффекту создания div шириной в половину страницы. Итак, @include outer-container нужно или нет?

Каковы возможные последствия неиспользования этого?


person ma77c    schedule 12.11.2015    source источник


Ответы (1)


Ссылка на документы Neat:

Хотя это необязательно, рекомендуется использовать внешний контейнер.

Он очищает плавающие элементы, центрирует контейнер в области просмотра и устанавливает максимальную ширину. Последующий:

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

Выведет это:

.element {
    *zoom: 1;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .element:before, .element:after {
    content: " ";
    display: table;
  }

  .element:after {
    clear: both;
  }

Лично я всегда использую их, так как вам понадобится какой-то контейнер, чтобы поместить span-columns в него.

person Mike Harrison    schedule 01.12.2015