Bootstrap 4: постоянные элементы навигационной панели вне свернутого контейнера

Навигация по веб-сайту может быть неприятной, когда важные ссылки, такие как значки социальных сетей, исчезают, когда навигационная панель сворачивается в меньшем размере экраны. К счастью, Bootstrap 4 предлагает элегантное решение, позволяющее сохранять определенные элементы навигационной панели видимыми, даже если меню свернуто.

Проблема

Проблема возникает, когда навигационная панель сворачивается, когда ширина экрана становится узкой. . Это поведение контролируется классом .collapse. По умолчанию все элементы в контейнере .collapse скрыты, когда активировано свертывание.

Решение

Чтобы определенные элементы панели навигации не исчезли при сворачивании, просто переместите их за пределы контейнера .collapse. . Этого можно добиться с помощью служебных классов order-* для настройки порядка элементов в гибком поле.

Пример кода

В этом примере значки социальных сетей размещаются внутри контейнера за пределами элемента .collapse. Классы d-flex и order-* гарантируют, что значки останутся в правильном порядке и положении, когда панель навигации свернута.