Bourbon Neat Grid, мобильная точка останова

У меня есть действительно простой веб-сайт, который использует sass и bourbon опрятную сетку. Я пытаюсь добиться того же эффекта, что и (http://neat.bourbon.io/examples/), сайт. При ширине 800 пикселей сетки, кажется, имеют точку останова и удаляют столбцы диапазона и переходят к ширине 100%.

Приведенный ниже код выводит оболочку и два элемента div размером 4 и 8 диапазонов. Когда я уменьшаю размер браузера даже до 300 пикселей, сетка по-прежнему сохраняется, а разделы заголовка и контента не ломаются и имеют полную ширину 100%.

Как я могу добиться этого эффекта? Я попытался сделать div 100% по умолчанию, а в точке останова добавить столбцы span, но это не работает. Спасибо.

.wrapper {
@include outer-container;
.title {@include span-columns(4);}
.content {@include span-columns(8);}
}

<div class="wrapper">
<div class="title"></div>
<div class="content"></div>
</div>

sass bourbon neat
person Oliver    schedule 15.06.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Для этого необходимо указать точки останова. Просто @include уложите media($your_settings) и вы готовы к работе. Подробнее читайте здесь. Что-то вроде этого:

.wrapper {
  @include outer-container; 

  .title {
    @include span-columns(4);

    @include media(max-width 300px) {
      @include span-columns(12); // or whatever you need for 100% width
    }
  }

  .content {
    @include span-columns(8)
  }
}
person Drops    schedule 15.06.2014