Центрированный
Расположите выпадающее меню по центру под переключателем с помощью .dropdown-center в родительском элементе.
Выпадающий список
Чтобы вызвать выпадающее меню над элементами, добавьте .dropup к родительскому элементу.
Раскрывающийся список по центру
Расположите выпадающее меню по центру над переключателем с помощью .dropup-center в родительском элементе.
Выпадающий список
Чтобы открыть выпадающее меню справа от элементов, добавьте .dropend к родительскому элементу.
Выпадающий Старт
Чтобы открыть выпадающее меню слева от элементов, добавьте .dropstart к родительскому элементу.
Пункты меню
Вы можете использовать элементы или
Активный
Добавьте .active к элементам в выпадающем списке, чтобы сделать их активными. Чтобы сообщить вспомогательным технологиям об активном состоянии, используйте атрибут aria-current — со значением page для текущей страницы или true для текущего элемента в наборе.
Выравнивание меню
По умолчанию выпадающее меню автоматически располагается на расстоянии 100 % от верхней границы и слева от родительского элемента. Это можно изменить с помощью классов направления .drop*, но также можно управлять ими с помощью дополнительных классов-модификаторов.
Добавьте .dropdown-menu-end к .dropdown-menu для выравнивания выпадающего меню по правому краю. При использовании Bootstrap в режиме RTL направления меняются на противоположные, то есть .dropdown-menu-end будет отображаться слева.
Внимание! Раскрывающиеся списки располагаются с помощью Popper, за исключением случаев, когда они находятся на панели навигации.
Параметры выравнивания
Вот небольшая демонстрация различных вариантов выравнивания выпадающих списков в одном месте.