.d-block .d-sm-none 与 Bootstrap 不起作用，导航栏在所有尺寸的屏幕上仍然可见答案

【问题标题】：.d-block .d-sm-none with Bootstrap does not work and the navbar is still visible on ALL sizes of screens.d-block .d-sm-none 与 Bootstrap 不起作用，导航栏在所有尺寸的屏幕上仍然可见
【发布时间】：2022-08-05 18:46:37
【问题描述】：

我试图让汉堡菜单仅在 xs 设备上可见，我在 Bootstrap 上查找它是 .d-block .d-sm-none。但它在我的代码中不起作用（第 25 行）。有人可以让我知道我的代码有什么问题吗？

<!doctype html>
<html lang=\"en\">
  <head>
    <meta charset=\"utf-8\">
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">

    <title>Menu</title>
    <link rel=\"stylesheet\" href=\"css/bootstrap.min.css\">
    <link rel=\"stylesheet\" href=\"css/style.css\">
  </head>

<body>
  <header>
    <nav id=\"header-nav\" class=\"navbar navbar-default\">
      <div class=\"container-fluid\">
        <div class=\"navbar-header\">
          <a href=\"#\" class=\"navbar-brand\">Food,LLC</a>
          <button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">
            <span class=\"navbar-toggler-icon\"></span>
          </button>
        </div><!--END of class=\"navbar-header\" Level 2--> 

        <div class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\">
          <ul class=\"text-center .d-block .d-sm-none\">
            <li class=\"nav-item\">
              <a class=\"nav-link active\" aria-current=\"page\" href=\"#\">Chicken</a>
            </li>
            <li class=\"nav-item\">
              <a class=\"nav-link active\" aria-current=\"page\" href=\"#\">Beef</a>
            </li>
            <li class=\"nav-item\">
              <a class=\"nav-link active\" aria-current=\"page\" href=\"#\">Sushi</a>
            </li>
        </div> <!--END of class=\"collapse navbar-collapse\"\" Level 2-->     
      </div><!--END of class=\"container\" Level 1--> 
    </nav>
  </header>

    </div>

  </div>
 

  <!-- jQuery (Bootstrap JS plugins depend on it) -->
  <script src=\"js/jquery-3.6.0.js\"></script>
  <script src=\"js/bootstrap.min.js\"></script>
  <script src=\"js/script.js\"></script>
</body>
</html>

标签： twitter-bootstrap

【解决方案1】：

请在您的 sn-p 中替换以下代码。我已经删除了两个类之前的点（。）并将类位置更改为按钮

<!doctype html>
<html lang="en">

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

    <title>Menu</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <header>
        <nav id="header-nav" class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a href="#" class="navbar-brand">Food,LLC</a>
                    <button class="navbar-toggler d-block d-sm-none" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                </div>
                <!--END of class="navbar-header" Level 2-->

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="text-center">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Chicken</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Beef</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Sushi</a>
                        </li>
                </div>
                <!--END of class="collapse navbar-collapse"" Level 2-->
            </div>
            <!--END of class="container" Level 1-->
        </nav>
    </header>

    </div>

    </div>


    <!-- jQuery (Bootstrap JS plugins depend on it) -->
    <script src="js/jquery-3.6.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/script.js"></script>
</body>

</html>

【讨论】：