Bootstrap dropdown-menu за пределами экрана?

Question

[kot2566]

Botstrap 4.1.3
На мобильных экранах выпадающее меню скрывается за экраном.
Знаю, что есть решение с добавлением класса 'dropdown-menu-right', но он жёстко привязывает к правой границе, а также нужно создавать свои костыли для разных разрешений, т.к. нет 'dropdown-menu-md-right' и т.п.
Проблема в том, что если, например, добавить свойство "position:fixed" к самому верхнему блоку (.container), то всё будет высчитываться именно так, как нужно. Как добиться этого эффекта со свойством 'position:relative;"?
https://jsfiddle.net/3gj9w4tq/2/

Answer 1

[Арсений Матыцин]

Как, я конечно, недолюбливаю бутстрап, но делали его умные люди, которые избегают таких артефактов. Следовательно проблема в твоем CSS или ты классов «лишних» навешал. Смотри консоль разработчика и отключай, что кажется сомнительным. Сверху, над атрибутом, ты и увидишь класс, который «все ломает».

Comments

[kot2566]

Не получается.
Свой css не используется, только навешивание стандартных классов.
Те классы, которые сейчас и которые в любом случае нужны:
level1) container - обёртка
level2) d-flex justify-content-end align-items-center - выравнивание по правому углу
level3-level5) стандартный блок dropdown
https://jsfiddle.net/3gj9w4tq/12/

[Арсений Матыцин]

Все, понял. Да, определенно, стоило сразу взглянуть на код.
Вот, проблема твоя в том, что ты замудрил свой вопрос.
Сейчас потратил некоторое время на то, чтобы вникнуть и что я могу посоветовать: в медиазапросе триггернуть на стили, которые определенно стоит снять с класса .dropdown-menu-right
Иными словами, не придумывай себе геморрой самостоятельно.