Bootstrap 切换按钮未显示所有 nav-right 项

Question

我摆弄了导航栏并将其置于 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;
     }

Answer 1

问题是您的 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>

Bootstrap 切换按钮未显示所有 nav-right 项

Bootstrap toggle button not showing all nav-right items

html

twitter-bootstrap-3