Столбцы Bootstrap и абзацы переменной высоты

Использование Bootstrap 3.3.7 и попытка разместить 17 абзацев переменной высоты в макете из 3 столбцов (col-md-4) для высокого разрешения, 2 столбца (col-sm-6) или 1 столбца (col-xs-12) . Независимо от того, есть ли три или два столбца, я хотел бы получить макет, который дает столбцы, близкие к одинаковой высоте. Попытка создать гибкий макет, поскольку источник абзаца не является статическим.

Я старался:

<p class="col-md-4 col-sm-6 col-xs-12">...</p>

Но поскольку абзацы имеют переменную высоту, все получилось не так, как я надеялся. Есть ли способ заставить абзацы перемещаться везде, где есть место, не оставляя пробелов, используя только Bootstrap? Как насчет комбинации с Sass?


person nstuyvesant    schedule 27.12.2016    source источник


Ответы (1)


Решил это с помощью медиа-запросов CSS и избавился от классов Bootstrap.

/* Extra small */
@media (min-width: 480px) {
  .faqs {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
}

/* Small */
@media (min-width: 768px) {
  .faqs {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}

/* Medium */
@media (min-width: 992px) {
  .faqs {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}

/* Large */
@media (min-width: 1200px) {
  .faqs {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }
}

article {
  break-inside: avoid-column; // keep articles together
}
person nstuyvesant    schedule 28.12.2016