Bootstrap切换按钮不显示所有导航右侧项目

Question

我使用导航栏进行了操作，并将其放置在标题图片下方。一切都看起来很好，全屏。但是在移动设备上，导航栏右侧的项目隐藏在切换中。谁能告诉我为什么？

Bootply：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; 
    } 

Answer 1

问题既是你的myNavbar■找相同的ID。

你不能给多个元素相同的id;那些合拢/不合拢的javascript只会获得其中的一个。所以，当您单击按钮：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

这将只显示两个中的一个：

<div class="collapse navbar-collapse navbar-left" id="myNavbar">

您可以通过使用类，而不是解决这个问题。多个项目可以具有相同的类别。首先，将您的按钮中的data-target更改为.myNavbar。像这样：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".myNavbar">

然后，改变双方的导航栏的。删除该ID并将其添加到班级列表中。像这样：

<div class="collapse navbar-collapse navbar-left myNavbar">

此外，你有不良HTML在你myNavbar S的一个：

<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>