Bootstrap 5 Выпадающие списки Адаптивное выравнивание

Bootstrap 5 Dropdowns Адаптивное выравнивание используется для выравнивания раскрывающихся списков с помощью адаптивных классов вариантов. Нам нужно добавить класс выравнивания для конкретной точки останова, чтобы сделать выравнивание раскрывающегося списка отзывчивым.

Раскрывающийся класс адаптивного выравнивания:

• dropdown-menu{-*}-end: чтобы выровнять раскрывающийся список справа с заданной точкой останова. Здесь * можно заменить на sm, md, lg, xl, xxl.
• dropdown-menu{-*}-start: чтобы выровнять раскрывающийся список слева с заданной точкой останова. Здесь * можно заменить на sm, md, lg, xl, xxl.

Требуемый атрибут:

• data-bs-display: чтобы использовать адаптивное выравнивание, нам нужно отключить динамическое позиционирование, установив для этого атрибута значение «static».

Синтаксис

 <ul class="dropdown-menu dropdown-menu-*-**">
   <li>Content</li>
 </ul>

• * можно заменить точками останова экрана, такими как sm,md,lg и т. д.
• ** можно заменить параметрами выравнивания, такими как конец, начало

Пример 1. В этом примере раскрывающееся меню будет выровнено до конца на большом экране и выровнено по левому краю, если не на большом экране.

Выход

Пример 2. В этом примере раскрывающееся меню будет выровнено до конца на среднем экране и по левому краю на маленьком и большом экранах.

Выход

Ссылки: https://getbootstrap.com/docs/5.0/components/dropdowns/#responsive-alignment