Question

我正在尝试将我的导航栏隐藏在小型设备或更低版本的用户身上。然而，当我将屏幕缩小时，它并没有隐藏。

我的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>

还有任何想法，当屏幕很小时，我可以从我的.page-header div上的导航栏显示切换按钮，这也是值得赞赏的。谢谢。

Answer 1

类hidden-sm-down是一个Bootstrap 4类，但看起来您可能正在使用Bootstrap 3.将hidden-sm-down替换为hidden-xs，导航栏将隐藏在非常小的屏幕上。

Bootstrap的响应式实用程序类对我来说不起作用

1 个答案: