Bootstrap 5 Группа списка Горизонтальная

Bootstrap 5 Горизонтальная группа списка облегчает изменение и выравнивание структуры элементов группы списка от вертикальной до горизонтальной по всем контрольным точкам за счет реализации класса .list-group-horizontal . Чтобы создать горизонтальную группу списков, которая начинается с минимальной ширины точки останова, мы можем реализовать класс .list-group-horizontal-{sm|md|lg|xl|xxl}, чтобы сделать адаптивный вариант.

Список групповых горизонтальных классов:

• list-group-horizontal: этот класс используется для того, чтобы элементы списка отображались горизонтально.
• list-group-horizontal-{sm|md|lg|xl|xxl}: этот класс используется для добавления отзывчивости элементам.

Примечание. Класс Bootstrap 5 flex-fill используется для горизонтального добавления списка элементов группы одинаковой ширины путем указания его с каждым элементом группы списка.

Синтаксис: * можно заменить на sm, md, lg, xl и xxl.

<ul class="list-group list-group-horizontal-*">
     <li class="list-group-item">...</li>
     <li class="list-group-item">...</li>
</ul>

Примечание. Группы горизонтального списка нельзя комбинировать с группами скрытого списка.

Пример 1. В этом примере описывается базовое использование горизонтальной группы списка в Bootstrap5 путем указания свойств горизонтального элемента группы списка.

Выход:

Пример 2. Следующий код демонстрирует горизонтальные элементы группы списка с отзывчивостью.

Выход:

Ссылка: https://getbootstrap.com/docs/5.0/components/list-group/#horizontal