Bootstrap導航欄不是固定的移動頂部

由於某些原因，當我的html文件通過移動電話訪問網站時，它的頂部沒有固定的導航欄。但是，它固定在我的PC網頁瀏覽器的頂部。這到底是什麼錯誤？Bootstrap導航欄不是固定的移動頂部

注意：如果我刪除responsive.css，那麼移動版本會固定在頂部，但不會響應。各種不同的答案建議導航欄固定頂部，0像素填充和用戶可擴展的編號。這些似乎都沒有爲我工作。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen"> 
    <link href="css/bootstrap.css" rel="stylesheet" media="screen"> 
    <link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen"> 
    <title>T6</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <!-- Le styles --> 
    <link href="../css/bootstrap.css" rel="stylesheet"> 
    <style type="text/css"> 
     body { 
     padding-top: 0px; 
     padding-bottom: 0px; 
     background-color: #f5f5f5; 
     } 

     .form-signin { 
     max-width: 300px; 
     padding: 19px 29px 29px; 
     margin: 0 auto 20px; 
     background-color: #fff; 
     border: 1px solid #e5e5e5; 
     -webkit-border-radius: 5px; 
      -moz-border-radius: 5px; 
       border-radius: 5px; 
     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05); 
      -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05); 
       box-shadow: 0 1px 2px rgba(0,0,0,.05); 
     } 
     .form-signin .form-signin-heading, 
     .form-signin .checkbox { 
     margin-bottom: 10px; 
     } 
     .form-signin input[type="text"], 
     .form-signin input[type="password"] { 
     font-size: 16px; 
     height: auto; 
     margin-bottom: 15px; 
     padding: 7px 9px; 
     } 

    </style> 



    </head> 


    <br><br><br> 
    <body> 

    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="navbar-inner"> 
     <div class="container"> 
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="brand" href="#">TMedia</a> 
      <div class="nav-collapse collapse"> 
      <ul class="nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="/Polar/about.html">About</a></li>  
       <li><a href="/Polar/login2.html">Login</a></li> 
       <li><a href="/Polar/contact.html">Contact Us</a> 
      </ul> 
      </div><!--/.nav-collapse --> 
     </div> 
     </div> 
    </div> 


<a href="http://google.com"> 
<img src="google.jpg" alt="HTML tutorial" width="100" height="100"></a></p> 

<a href="http://yahoo.com"> 
<img src="yahoo.jpg" alt="HTML tutorial" width="100" height="100"></a></p> 

<!-- /container --> 

    <!-- Le javascript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 

    <script src="http://code.jquery.com/jquery.js"></script> 
    <script src="js/bootstrap.min.js"></script> 

    </body> 
</html>

來源

2013-12-21 krikara

我知道這不回答你的技術問題，但我認爲不固定在小屏幕上的原因是房地產更珍貴。在大屏幕上，您可以負擔得起這個空間。 –

@LukeMcGregor儘管我沒有把它放在那裏，但似乎還是有一些填充。無論如何對我來說完全消除了這一點？ – krikara

其實我這裏唯一的問題是我的Bootstrap版本。

在上面的代碼中，我運行的是2.2.2，它並不完全支持所有的移動方面。在ugprading到3.0.3之後，一切正常。

來源

2014-01-07 09:48:11 krikara

Bootstrap導航欄不是固定的移動頂部

回答

相關問題