Разрыв после колонки

В SIMAI Framework с помощью модификатора можно управлять разрывом столбца или страницы после элемента.

Классы

Описание

Адаптивный модификатор. Позволяет управлять разрывом столбца или страницы после элемента, в зависимости от размера области просмотра.

Использование модификатора: {контрольная точка}:{модификатор}

• Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
• Модификатор. Обязательный параметр. Может принимать значения:
  • break-after-auto - равномерное распределение;
  • break-after-avoid - отмена разрыва страницы;
  • break-after-all - принудительный разрыв страницы;
  • break-after-avoid-page - отмена разрыва страницы после текущего элемента;
  • break-after-page - обязательный разрыв и переход к новой колонке после текущего элемента;
  • break-after-left - принудительная расстановка одного или двух разрывов страницы после текущего элемента, следующий элемент становится слева
  • break-after-right - принудительная расстановка одного или двух разрывов страницы после текущего элемента, следующий элемент становиться справа
  • break-after-column - принудительный разрыв колонок

Пример

С помощью модификатора break-after-{значение} для управления разрывом столбца или страницы после элемента. Например, используйте модификатор break-after-column для принудительного разрыва столбца

<div class="layout-col-2">
  <p>Что ж, позволь мне кое-что тебе сказать, ...</p>
  <p class="break-after-column">Конечно, смейтесь...</p>
  <p>Может быть, мы сможем жить без...</p>
  <p>Смотреть. Если вы думаете, что это...</p>
</div>

Адаптивность

Для управления разрывом стоблца или страницы после элемента, начиная с определенного размера области просмотра, добавьте к модификатору префикс контрольной точки (sm, md, lg, xl) через двоеточие (:).

Например, используйте модификатор md:break-after-column для отображения фрагментов элемента как единое целое для экранов размером Medium и больше.

<div class="md:break-after-column"></div>

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью