Css 具有多个标头的引导导航栏折叠问题

这是我的密码

<header class="navbar-inverse navbar-fixed-top wet-asphalt">
    <div class="container">
    <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse">
                <a href="tel:9XXXXXXXXX">Call now!</a>
            </button>
        </div>
        <div class="collapse **navbar-collapse**">
            <ul class="nav navbar-nav navbar-right" style="margin-top:0px;">
                <li><a href="tel:9XXXXXXXXX">9XXXXXXXXX</a></li>
                <li><a href="mailto:example@gmail.com">mail us</a></li>
            </ul>
        </div>
    </div>
</header>

<header class="navbar navbar-inverse wet-asphalt" role="banner" style="margin-top: -46px; border-radius:0px;">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="margin-top: 25px;">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="logo"></a>
        </div>
        <div class="collapse **navbar-collapse**">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="about-us.html">About Us</a></li>
            </ul>
        </div>
    </div>
</header>

切换导航

当我在移动设备上查看时，单击第二个标题菜单。它同时触发导航栏的折叠。当我从第一个标题中删除

navbar collapse

类时，它将消失

我不希望这个类也从我的第一个标题中删除，也不希望它崩溃。

---

请帮我整理一下。我对Bootstrap很陌生。

之所以会出现这种情况，是因为它们的

数据目标是相同的。给它们两个不同的值，例如
data target=“.navbar-collapse-1”
和
data target=“.navbar-collapse-2”

每个
数据目标都应该指向相应的容器类。第一个div将具有第一个类
，第二个div应具有另一个类

这是你的工作代码。





切换导航




如果您试图始终暴露第一个
导航栏中的链接，同时保持节的标准
折叠
功能，只需使用两个单独的导航栏，但从第一个导航栏中删除
折叠
功能（导航栏标题
节）。然后，您可以使用
navbar固定顶
类将两个导航包围起来

*唯一需要应用的CSS是将第一个navs链接与设备大小保持内联

工作示例：
正文{
填充顶部：120px；
}
.navbar-inverse.navbar-top ul>li{
显示：内联块；
}







切换导航







Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它有
不仅存活了五个世纪，而且飞跃到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着桌面出版而流行
Aldus PageMaker等软件，包括Lorem Ipsum版本。


Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它有
不仅存活了五个世纪，而且飞跃到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着桌面出版而流行
Aldus PageMaker等软件，包括Lorem Ipsum版本。


Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它有
不仅存活了五个世纪，而且飞跃到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着桌面出版而流行
Aldus PageMaker等软件，包括Lorem Ipsum版本。


Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它有
不仅存活了五个世纪，而且飞跃到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着桌面出版而流行
Aldus PageMaker等软件，包括Lorem Ipsum版本。


Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它有
不仅存活了五个世纪，而且飞跃到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着桌面出版而流行
Aldus PageMaker等软件，包括Lorem Ipsum版本。