Bootstrap的響應式實用程序類別不適用於我

我試圖隱藏我的導航欄，用戶是在小型設備或更低的設備上。但是，當我縮小屏幕時，它不會隱藏。Bootstrap的響應式實用程序類別不適用於我

我的HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta charset="UTF-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
     <title>Dylan Hobday | Web Developer</title> 
     <link rel="stylesheet" href="Styles/Bootstrap.min.css"> 
     <link rel="stylesheet" href="Styles/Index.css"> 
    </head> 
    <body> 
<nav class="navbar navbar-default white hidden-sm-down" id="navbar" 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" 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" href="#">Dylan Hobday</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"> 
        <li class="active"> 
         <a href="#">Home</a> 
        </li> 
        <li> 
         <a href="#">Projects</a> 
        </li> 
        <li> 
         <a href="#">Contact</a> 
        </li> 
        <li> 
         <a href="#">Hire</a> 
        </li> 
       </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
     </div> 
     <!-- /.container --> 
    </nav> 
    <div class="page-header"> 
    <h1><b>Home</b></h1> 
</div> 
<div class="Wrapper" id="background"> 

</div> 
    </body> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="Scripts/js/Index.js"></script> 
    <script src="Scripts/js/Bootstrap.min.js"></script> 
</html>

以及任何想法時，屏幕小也會理解我如何能夠從我的。第頭DIV導航欄顯示使切換按鈕。謝謝。

來源

2016-01-26 Dylan Hobday

您使用的是什麼版本的Bootstrap？ – michael

類hidden-sm-down是Bootstrap 4類，但看起來你可能會使用Bootstrap 3.將hidden-sm-down替換爲hidden-xs，導航欄將隱藏在非常小的屏幕上。

來源

2016-01-26 04:16:13 michael

謝謝。我沒有意識到我的bootstrap過時了。 –

Bootstrap的響應式實用程序類別不適用於我

回答

相關問題