如何使这个部分可折叠的导航栏在 Bootstrap 4 上显示我想要的项目？

Question

我正在尝试让 Bootstrap 4 导航栏仅部分折叠。

基本上我希望某些向右对齐的项目始终保持可见，而如果您尝试在移动设备上打开网站，左侧的大多数导航栏项目将折叠成一个菜单。

问题在于，当您展开该菜单时，折叠的元素会显示在固定菜单之前，正如您所期望的那样，但出于明显的审美原因，我希望它们显示在下方。

工作示例：http://jsfiddle.net/sfm70xLe/

扩展时的期望结果：

访问折叠项目时的期望结果：

我一直在玩弄元素的配置以及尝试float-right 和float-right，但事实证明这是无效的，我不确定如何在不对 Bootstrap 奠定的基础进行重大更改的情况下继续进行此操作我。有什么想法吗？

Answer 1

如果您在 HTML 中将 navbar-header div 上移到 navbar-collapse div 之前，它将起作用。然后，您只需要使用order 将导航栏标题向右移动即可获得大于中号的尺寸。