@raulvodov

Как в бутстрап сетке задать ширину под max-width 480px?

Имеются такие блоки take.ms/DXVdV
При ширине менее 992px блоки выглядят так take.ms/KPcPC
При менее 768px take.ms/nP59k тоже мне нравится, т.е. я специально задал col-xs-6 для квадратиков с цифрами, т.к. при ширине от 480 до 768, если установить col-xs-12, то эти прямоугольники с цифрами слишком широкие будут.
А теперь вопрос, как используя сетку бутстрап задать этим квадратикам 100% при размере менее 480px?
Напомню, что col-xs затрагивает ширину от 0 до 768px.
  • Вопрос задан
  • 96 просмотров
Решения вопроса 1
dpr
@dpr
frontend developer
1. Добавим брикпойнт и контейнер
$screen-xs-min: 520px;
$container-xs: 480px;


2. дополним класс .container
.container {
  @include container-fixed;

  @media (min-width: $screen-xs-min) {
    width: $container-xs;
  }
  // … Дальше оставляем как было
}


3. поправим миксин
@mixin make-grid-columns($i: 1, $list: ".col-xxs-#{$i}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-xxs-#{$i} .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
  }
…


4. Вызовем его
@include make-grid-columns();

5. Заменим строчку
@include make-grid(xs);
на
@include make-grid(xxs);

6. Добавим

@media (min-width: $screen-xs-min) {
  @include make-grid(xs);
}


И всё!!

Теперь в промежутке от 0 до 480 можем использовать колонки xxs
480 — 768 колонки xs
а далее стандартно.

[sarkazm on]
Ничего сложного, да ведь? =)))
[sarkazm off]

Поэтому я обычно выкидываю сетку версии 3 и использую гибрид — сетка как в третьей версии, на флоатах и т.д., но используя миксины (тоже немного доработанные) от четвёртой версии.
Там добавление брикпойнта сводится к простому добавлению значений в пару массивов (мапов) настроек.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы