可折叠导航栏在手机屏幕上变得不可见

Question

我正在尝试使用twitter bootstrap可折叠导航栏。在桌面导航栏上可见，但在移动屏幕上不可见。 这里是查看部分

<div class="masthead clearfix"> 
        <div class="inner"> 
         <h3 class="masthead-brand"><img src="/x/img/X.png" style="width:80px; position:relative; top:-20px;"></img></h3> 
         <div class="container"> 
          <div class="navbar-header"> 
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
           </button> 

          </div> 
          <div id="navbar" class="navbar-collapse collapse"> 

           <ul class="nav navbar-nav navbar-right" style="margin-top:15px;background-color:rgba(255,255,255,.4)"> 

            <li class="active"><a class="call_us btn btn-default no-rounded btn-hollow" th:text="${'+91 444}" style="cursor:default; pointer-events:none;"> Call Us 555</a></li> 

            <li ><a th:href="@{/X}" href="#">X</a></li> 
            <li><a th:href="@{/Y}" href="#">Y</a></li> 
            <li><a th:href="@{/Z}" href="#">Z</a></li> 
            <li><a th:href="@{/T}" href="#">C</a></li> 
            <li class="active"><a th:href="#" href="#">Blog</a></li> 
            <!--li><a href="#">Help</a></li--> 
           </ul> 
          </div><!--/.nav-collapse --> 
         </div> 
        </div> 
       </div> 

有人能帮我解决这个问题。我在我的路径中包含了collapse.js。

Answer 1

您错过了navbar类，这是Bootstrap中默认导航的第一行。请参阅Docs。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="masthead clearfix"> 
 
    <div class="inner"> 
 
    <h3 class="masthead-brand"><img src="http://placehold.it/350x150" style="width:80px; position:relative; top:-20px;"></img></h3> 
 

 
    <nav class="navbar navbar-default"> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 

 
      </button> 
 
     </div> 
 
     <div id="navbar" class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav navbar-right" style="margin-top:15px;background-color:rgba(255,255,255,.4)"> 
 
      <li class="active"><a class="call_us btn btn-default no-rounded btn-hollow" th:text="${'+91 444}" style="cursor:default; pointer-events:none;"> Call Us 555</a> 
 

 
      </li> 
 
      <li><a th:href="@{/X}" href="#">X</a> 
 

 
      </li> 
 
      <li><a th:href="@{/Y}" href="#">Y</a> 
 

 
      </li> 
 
      <li><a th:href="@{/Z}" href="#">Z</a> 
 

 
      </li> 
 
      <li><a th:href="@{/T}" href="#">C</a> 
 

 
      </li> 
 
      <li class="active"><a th:href="#" href="#">Blog</a> 
 

 
      </li> 
 
      <!--li><a href="#">Help</a></li--> 
 
      </ul> 
 
     </div> 
 
     <!--/.nav-collapse --> 
 
     </div> 
 
    </nav> 
 
    </div> 
 
</div>