bootstrap切換崩潰煎餅按鈕，不包括頁面

我得到的切換崩潰煎餅按鈕適用於小屏幕，但當菜單擴大時，它覆蓋屏幕的一部分。如何讓菜單擴展到覆蓋屏幕？我嘗試降低身體，但這並不奏效。bootstrap切換崩潰煎餅按鈕，不包括頁面

<!doctyp html> 
<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">   
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 

     <style> 
      body { padding-top:50px; } 
     </style> 

    </head> 
    <body> 

     <header> 
       <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
        <div class="container"> 

         <!-- The button that shows when the width is too short --> 
         <div class="navbar-header">        
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false" aria-controls="collapse"> 
           <span class="sr-only">Toggle navigation</span> 
           <span class="icon-bar"></span> 
           <span class="icon-bar"></span> 
           <span class="icon-bar"></span> 
          </button> 

          <a class="navbar-brand" ><span class="subhead"></span>Project 1</a> 
         </div>     
          <!-- The navigation menu. It collapses when the width is too short --> 
          <div id="collapse" class="collapse navbar-collapse"> 
           <ul class="nav navbar-nav navbar-right"> 
            <li><a href="#browse">browse</a></li> 
            <li><a href="#why">why</a></li> 
            <li><a href="#about">about</a></li>          
           </ul> 
          </div> 
        </div> 
       </nav> 

     </header> 


     <section> 
      <h3>Project 1 incomplete</h3> 
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
     </section> 

    </body> 


</html>

來源

2015-07-22 Zapp

由於您沒有提到你所要求的固定頂的行爲，因此，沒有這種行爲它的工作原理。

如果您想要固定頂級行爲，那麼它需要由JavaScript進行管理。

請檢查下面的代碼片段，並發表您的評論是否對您有幫助：

body { padding-top:0px; }

<!doctyp html> 
 
<html> 
 
    <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">   
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 

 

 
    </head> 
 
    <body> 
 

 
     <header> 
 
       <nav class="navbar navbar-inverse" role="navigation"> 
 
        <div class="container"> 
 

 
         <!-- The button that shows when the width is too short --> 
 
         <div class="navbar-header">        
 
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false" aria-controls="collapse"> 
 
           <span class="sr-only">Toggle navigation</span> 
 
           <span class="icon-bar"></span> 
 
           <span class="icon-bar"></span> 
 
           <span class="icon-bar"></span> 
 
          </button> 
 

 
          <a class="navbar-brand" ><span class="subhead"></span>Project 1</a> 
 
         </div>     
 
          <!-- The navigation menu. It collapses when the width is too short --> 
 
          <div id="collapse" class="collapse navbar-collapse"> 
 
           <ul class="nav navbar-nav navbar-right"> 
 
            <li><a href="#browse">browse</a></li> 
 
            <li><a href="#why">why</a></li> 
 
            <li><a href="#about">about</a></li>          
 
           </ul> 
 
          </div> 
 
        </div> 
 
       </nav> 
 

 
     </header> 
 

 

 
     <section> 
 
      <h3>Project 1 incomplete</h3> 
 
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
 
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
 
     </section> 
 

 
    </body> 
 

 

 
</html>

來源

2015-07-22 06:09:35 Vasimkhan

感謝您的答覆，但導航必須是固定的頂上。你的提示也給了我一些新的想法。我認爲JavaScript是方式。 – Zapp

bootstrap切換崩潰煎餅按鈕，不包括頁面

回答

相關問題