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

Question

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

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

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

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

展开时的预期结果:

访问折叠元素时的预期结果:

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

Answer 1

如果您在 HTML 中将 navbar-header div 向上移动到 navbar-collapse div 之前，它将起作用。那么你只需要使用 order将导航栏标题向右移动以适应大于中号的尺寸。