Бурбон Neat все еще использует 12 столбцов, даже если направляющие показывают 4 столбца

Я использую Bourbon и Neat в статичном сайте Octopress, который я строю. Я использую _grid-settings.scss файл без изменений, кроме включения направляющих ($visual-grid: true;). В моем screen.scss Я загружаю grid-настройки после Бурбона, но до Neat:

@import "bourbon/bourbon";
@import "grid-settings";
@import "neat/neat";

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

$phone-portrait: new-breakpoint(max-width $tiny-screen 4); // 450px

Когда я смотрю сайт на экране размером менее 450 пикселей, визуальная сетка показывает 4 столбца, но макет по-прежнему использует 12 столбцов. У меня есть несколько мест, где я использую 4 столбца в макете, для мобильных устройств они должны быть полной ширины, так как страница имеет только 4 столбца, но они составляют только треть ширины страницы. Я могу проверить, что мобильный все еще использует 12 столбцов, заменив @include span-columns(4) с @include span-columns(12), 12 столбцов div являются единственными div, которые имеют полную ширину на мобильном телефоне.

Почему Neat не использует одинаковое количество столбцов для направляющих и моего макета?

Источник

2 ответа

Решение

Оказывается, проблема была из-за неиспользования @include span-columns(4) на div в точке останова, которая изменяет количество столбцов ($phone-portrait: new-breakpoint(max-width $tiny-screen 4);). Сначала это казалось странным, пока я не понял, что на самом деле происходит. Когда я устанавливал div, чтобы охватить 4 столбца, neat берет количество столбцов и делит их на общее количество столбцов в текущей точке останова. В моем случае это будет 0,333, который будет использоваться в качестве ширины в процентах от div. Дело в том, что это никогда не изменится, даже если общее количество столбцов, внесенных позже, сделает точку останова. Мой div всегда будет 33,3% в ширину. Что мне нужно сделать, это повторить span-columns включите в медиа-селектор для точки останова, как это:

$phone-portrait: new-breakpoint(max-width $tiny-screen 4);

.my-div {
  @include span-columns(4);
}

@include media($phone-portrait) { 
    .my-div {
      @include span-columns(4);
    }
}

Это гарантирует, что мой div будет на 100% шириной для $phone-portrait точки останова.

Источник

Я думаю, что вы просто пропустили запятую из своего кода, думаю, вам нужно:

$phone-portrait: new-breakpoint(max-width $tiny-screen, 4); // 450px

Надеюсь это поможет

Источник
Другие вопросы по тегам