導航欄在移動顯示

Question

不可見我在我的網站上看到以下導航欄： -

<nav class="navbar navbar-default no-margin show"> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
      <li class="active"> 
       <button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="fa-stack"> <i class="fa fa-bars fa-stack-2x "></i></span></button> 
      </li> 
     </ul> 
     <div style="text-align: center; font-size: 20px; padding-top: 7px;"> 
      <a href="http://sunlightfoundation.com/" target="_blank"><img src="images/logo.png"></a> 
      <p style="display: inline"><b>Congress API</b></p> 
     </div> 
    </div> 
</nav> 

這導航欄是可見的像筆記本電腦中的屏幕，但它隱藏在移動顯示器。移動顯示屏中只有一條白色條。我沒有任何CSS的大型設備，我應該設置任何CSS屬性讓它顯示在移動設備上。切換按鈕也不可見。這很新鮮。

Answer 1

您的整個導航欄被包裹在應該隱藏在移動顯示屏中並由切換按鈕切換的摺疊類中。但由於您的切換按鈕位於摺疊類中，因此它將隱藏在移動寬度中。您的導航欄結構應該有一個.navbar-header類，其中應該放置切換按鈕和徽標。然後，您的鏈接應放在.collapse類中，這樣按鈕將顯示爲moblile寬度，然後您的內容可以切換。這裏是你的結構應該看起來的例子。

<div class="navbar navbar-default"> 
    <div class="navbar-header"> 
    <a class="navbar-brand" href="#">Your Logo</a> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    </div> 
    <div class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="#">Your Links</a></li> 
     <li><a href="#">Your Links</a></li> 
     <li><a href="#">Your Links</a></li> 
    </ul> 
    </div> 
</div>