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

cgh8pdjw 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(1)|浏览(228)

我试图使汉堡菜单只在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

来源：https://stackoverflow.com/questions/73179905/d-block-d-sm-none-with-bootstrap-does-not-work-and-the-navbar-is-still-visible

1条答案

按热度按时间

vdgimpew1#

请替换代码片段中的以下代码。我已经删除了两个类前面的点（.），并将类的位置更改为按钮

<!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>

Working demo https://www.screencast.com/t/BVegbJk2R0

赞(0）回复(0）举报 2022-12-08

我来回答

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

1条答案

请替换代码片段中的以下代码。我已经删除了两个类前面的点（.），并将类的位置更改为按钮

相关问题

热门标签

最新问答