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

此外，您的某个myNavbar s：

中的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切换按钮未显示所有导航右侧项目

1 个答案: