可摺疊導航欄在手機屏幕上變得不可見

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>