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

Question

[Raul Abdullin]

Имеются такие блоки 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.

Comments

[sim3x]

Загрузите картинки на хабрасторадж

Answer 1

[Сергей delphinpro]

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 и использую гибрид — сетка как в третьей версии, на флоатах и т.д., но используя миксины (тоже немного доработанные) от четвёртой версии.
Там добавление брикпойнта сводится к простому добавлению значений в пару массивов (мапов) настроек.

Comments

[Raul Abdullin]

Извиняюсь за долгий ответ, был завален работой. Спасибо большое за развернутый ответ. Действительно очень сложно, я далеко не всё понял. Это один из первых моих проектов по верстке. Был бы очень благодарен, если бы вкратце на языке новичка рассказали бы как этот гибрид использовать :)

[Сергей delphinpro]

raulvodov, только вкратце. исправляем исходники, пересобираем бутстрап под себя (добавили ещё один брикпойнт).
Если не работаете с препроцессорами, то "на языке новичков", наверное, не получится.
Если в теме, то спрашивайте непонятные моменты.

[Raul Abdullin]

Сергей delphinpro, я знаю sass вернее немного работал с ним, вроде ведь ничего сложного нет там? :) Снова извиняюсь за долгий ответ, завален делами по уши.

[Сергей delphinpro]

raulvodov, ничего сложного