Bootstrap 4：折叠容器外部的持久导航栏项目

当重要链接（例如社交媒体图标）在导航栏折叠成较小的形状时消失时，导航网站可能会令人沮丧屏幕。幸运的是，Bootstrap 4 提供了一个优雅的解决方案，即使在菜单折叠时也能保持某些导航栏项目可见。

问题

当屏幕宽度变窄时导航栏设置为折叠时，就会出现此问题。此行为由 .collapse 类控制。默认情况下，当折叠被激活时，.collapse 容器内的所有元素都会隐藏。

解决方案

要防止某些导航栏项目随着折叠而消失，只需将它们移到 .collapse 容器之外。这可以通过使用 order-* 实用程序类来调整元素的 Flexbox 顺序来实现。

代码示例

在此示例中，社交媒体图标放置在 .collapse 元素外部的容器内。 d-flex 和 order-* 类确保导航栏折叠时图标保持正确的顺序和位置。