Question

这是我的代码。

<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。当我从第一个标题中删除navbar-collapse类时，它会消失。

我也不希望从我的第一个标题中删除该类，也不希望它崩溃。请帮我整理一下。我是Bootstrap的新手。

Answer 1

这种情况正在发生，因为他们的data-target是相同的。给他们两个不同的，例如data-target=".navbar-collapse-1"和data-target=".navbar-collapse-2"

每个data-target都应该指向相应的容器类。第一个div将有第一个班级<div class="collapse navbar-collapse-1">，第二个div应该有另一个<div class="collapse navbar-collapse-2">

这是您的工作代码。

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<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" data-target=".navbar-collapse-1">
                <a href="tel:9XXXXXXXXX">Call now!</a>
            </button>
        </div>
        <div class="collapse navbar-collapse-1">
            <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: 150px; border-radius:0px;">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-2" 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-2">
            <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>

＆＃13;

Answer 2

如果您一直试图让第一个navbar中的链接始终暴露，同时保留该部分的标准collapse功能，只需使用两个单独的导航栏，但删除{{1第一个函数（collapse部分）。然后，您可以使用navbar-header类围绕两个导航。

*唯一需要应用的CSS是让您的第一个导航链接内嵌在设备尺寸上。

工作示例：

＆＃13;

navbar-fixed-top

＆＃13;

body {
  padding-top: 120px;
}
.navbar-inverse.navbar-top ul > li {
  display: inline-block;
}

＆＃13;

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

2 个答案: