Bootstrap navbar無法在手機瀏覽器上調整

我想讓瀏覽器響應任何移動瀏覽器的工作並根據瀏覽器窗口進行調整，但由於某種原因，當我在移動瀏覽器（Chrome）上加載網站時暫時顯示/摺疊選項，然後導航欄保持固定狀態，以使單頁引導程序網站變爲雙頁（書本類型）網站，其中所有網站內容在左側和右側爲空白Bootstrap navbar無法在手機瀏覽器上調整

這裏是導航欄的代碼

HTML代碼

<head> 

<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="description" content=""> 
<meta name="author" content=""> 

<title>NDT Solution - Home</title> 

<!-- Bootstrap Core CSS --> 
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"> 

<!-- Custom Fonts --> 
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'> 
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'> 
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css"> 

<!-- Plugin CSS --> 
<link rel="stylesheet" href="css/animate.min.css" type="text/css"> 

<!-- Custom CSS --> 
<link rel="stylesheet" href="css/creative.css" type="text/css"> 

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
<!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
<![endif]--> 

<!-- jQuery --> 
<script src="js/jquery.js"></script> 

<!-- Bootstrap Core JavaScript --> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/bootstrap.js"></script> 

<!-- Plugin JavaScript --> 
<script src="js/jquery.easing.min.js"></script> 
<script src="js/jquery.fittext.js"></script> 
<script src="js/wow.min.js"></script> 

<!-- Custom Theme JavaScript --> 
<script src="js/creative.js"></script> 

</head> 
     <nav id="mainNav" class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <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 page-scroll" href="#page-top">NDT Solution</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a class="page-scroll" href="#about">About</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#services">Services</a> 
       </li> 

       <li> 
        <a class="page-scroll" href="#team">Our Team</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#contact">Contact</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav>

CSS

Default bootstrap css files

來源

2016-05-29 Danish Ali

-1

.container具有用於在自舉（XS，SM，MD，LG）各個畫面尺寸一個固定寬度;容器流體膨脹以填充可用寬度。你可以使用流體。

你有以下的標籤在你的腦袋：

<meta name="viewport" content="width=device-width, initial-scale=1">

來源

2016-05-29 12:39:24 Hedge

哪個標籤你指的是？集裝箱液？ –

對不起，意在添加 – Hedge

是的，我在頭部有這個標籤 –

Bootstrap navbar無法在手機瀏覽器上調整

回答

相關問題