这是我的代码。
<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的新手。
答案 0 :(得分:0)
这种情况正在发生,因为他们的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">
这是您的工作代码。
<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;
答案 1 :(得分:0)
如果您一直试图让第一个navbar
中的链接始终暴露,同时保留该部分的标准collapse
功能,只需使用两个单独的导航栏,但删除{{1第一个函数(collapse
部分)。然后,您可以使用navbar-header
类围绕两个导航。
*唯一需要应用的CSS是让您的第一个导航链接内嵌在设备尺寸上。
工作示例:
navbar-fixed-top
&#13;
body {
padding-top: 120px;
}
.navbar-inverse.navbar-top ul > li {
display: inline-block;
}
&#13;