两个navbars boostrap 3，只有一个崩溃

Question

我正在使用Bootstrap 3做一个站点，但我需要2个导航菜单，一个显示语言，联系人和登录以及页面的其他部分。

这是桌面视图

我希望语言/联系人/登录菜单能够查看平板电脑/移动设备继续显示相同内容并且单独是折叠菜单部分。

我添加了一些样式并查看移动设备看起来不错但桌面视图，菜单部分显示为左对齐并希望它右对齐，而不会影响移动视图。

[JSFIDDLE](https://jsfiddle.net/karlamip/2yqmt2kv/)

如果有人有想法，我非常感激

Answer 1

如果您只想修复对齐方式，请在CSS中添加媒体查询，以便在特定屏幕尺寸（移动/桌面阈值）上设置这些菜单元素的右对齐。

Answer 2

尝试将.navbar-ex1-collapse和data-target=".navbar-ex1-collapse"更改为另一个菜单的新类名，以便它可以正常工作。

Answer 3

如果您希望折叠菜单显示在“语言/联系我们/登录”的右侧，同时保持该菜单的固定，您需要在HTML结构中更改按钮折叠的位置，并更改几个类以便没有冲突。

JSFiddle的一个分支在这里：https://jsfiddle.net/sq8u45qq/1/

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
    <span class="sr-only">Desplegar navegación</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

以上内容与您的固定导航移动到同一行。然后，您必须删除该导航的collapse（无论如何您似乎不想折叠），并删除您应用于这两种导航的类名navbar-ex1-collapse。