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>