Bootstrap 切换按钮未显示所有 nav-right 项
Bootstrap toggle button not showing all nav-right items
我摆弄了导航栏并将其置于 header 图片下方。全屏显示一切正常。但在手机上,navbar-right 项目隐藏在切换中。谁能告诉我为什么?
引导:http://www.bootply.com/zmpMWqSmyU
html:
<!-- header pic -->
<div class ="row">
<img src ="1.jpg" class ="img-responsive">
</div>
</div>
<!-- Navigation -->
<div class = "navbar navbar-transaparent navbar-fixed-top" role
="navigation">
<div class ="container">
<div class = "navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div> <!-- end of navbar header -->
<div class="collapse navbar-collapse navbar-left" id="myNavbar">
<ul class="nav navbar-nav"> </li>
<li><a href="#">Home</a></li>
<li><a href="#1">About us </a></li>
<li><a href="#">Products</a></li>
</ul>
</div>
<a class = "navbar-brand" href="#"> <h1 style="font
size:80px;">Lily </h1></a>
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">Blog</a></li>
<li><a href="#">Testimonials </a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div> <!-- end of container -->
</div> <!-- end of navbar -->
css
.nav {
font-size: 35px;
color: black;
margin-top: 520px;
}
.navbar-toggle .icon-bar {
display: block;
background-color: blue;
}
.navbar-brand {
color: #ff5bae;
text-align: center;
position: absolute;
margin-top: 6.0%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
}
.navbar-brand:hover{
color:#bcaacf;
}
#myNavbar li>a:hover{
color: #ffe6d7;
background-color: #bcaacf;
}
.nav.navbar-nav li>a {
color: black;
}
问题是您的 myNavbar
具有相同的 ID。
不能为多个元素赋予相同的id;做 collapsing/un-collapsing 的 javascript 只会得到其中之一。因此,当您单击按钮时:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
它只会显示两者之一:
<div class="collapse navbar-collapse navbar-left" id="myNavbar">
您可以改用 classes 来解决这个问题。多个项目可以具有相同的 class。首先,将按钮中的 data-target
更改为 .myNavbar
。像这样:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".myNavbar">
然后,更改两个导航栏。删除 id 并将其添加到 class 列表中。像这样:
<div class="collapse navbar-collapse navbar-left myNavbar">
此外,您的 myNavbar
之一中的 html 格式不正确:
<ul class="nav navbar-nav"> </li>
<li><a href="#">Home</a></li>
<li><a href="#1">About us </a></li>
<li><a href="#">Products</a></li>
</ul>
应该是:
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#1">About us </a></li>
<li><a href="#">Products</a></li>
</ul>
我摆弄了导航栏并将其置于 header 图片下方。全屏显示一切正常。但在手机上,navbar-right 项目隐藏在切换中。谁能告诉我为什么?
引导:http://www.bootply.com/zmpMWqSmyU
html:
<!-- header pic -->
<div class ="row">
<img src ="1.jpg" class ="img-responsive">
</div>
</div>
<!-- Navigation -->
<div class = "navbar navbar-transaparent navbar-fixed-top" role
="navigation">
<div class ="container">
<div class = "navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div> <!-- end of navbar header -->
<div class="collapse navbar-collapse navbar-left" id="myNavbar">
<ul class="nav navbar-nav"> </li>
<li><a href="#">Home</a></li>
<li><a href="#1">About us </a></li>
<li><a href="#">Products</a></li>
</ul>
</div>
<a class = "navbar-brand" href="#"> <h1 style="font
size:80px;">Lily </h1></a>
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">Blog</a></li>
<li><a href="#">Testimonials </a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div> <!-- end of container -->
</div> <!-- end of navbar -->
css
.nav {
font-size: 35px;
color: black;
margin-top: 520px;
}
.navbar-toggle .icon-bar {
display: block;
background-color: blue;
}
.navbar-brand {
color: #ff5bae;
text-align: center;
position: absolute;
margin-top: 6.0%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
}
.navbar-brand:hover{
color:#bcaacf;
}
#myNavbar li>a:hover{
color: #ffe6d7;
background-color: #bcaacf;
}
.nav.navbar-nav li>a {
color: black;
}
问题是您的 myNavbar
具有相同的 ID。
不能为多个元素赋予相同的id;做 collapsing/un-collapsing 的 javascript 只会得到其中之一。因此,当您单击按钮时:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
它只会显示两者之一:
<div class="collapse navbar-collapse navbar-left" id="myNavbar">
您可以改用 classes 来解决这个问题。多个项目可以具有相同的 class。首先,将按钮中的 data-target
更改为 .myNavbar
。像这样:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".myNavbar">
然后,更改两个导航栏。删除 id 并将其添加到 class 列表中。像这样:
<div class="collapse navbar-collapse navbar-left myNavbar">
此外,您的 myNavbar
之一中的 html 格式不正确:
<ul class="nav navbar-nav"> </li>
<li><a href="#">Home</a></li>
<li><a href="#1">About us </a></li>
<li><a href="#">Products</a></li>
</ul>
应该是:
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#1">About us </a></li>
<li><a href="#">Products</a></li>
</ul>