更改 Mediaquery 响应答案

【问题标题】：Change Mediaquery response更改 Mediaquery 响应
【发布时间】：2022-02-12 22:00:09
【问题描述】：

我开始全栈学习，我们刚刚看到了引导程序。我正在做这个网站响应，我修改了我的菜单栏。我唯一想更改的是菜单折叠到切换按钮仅低于 600 像素宽（也适用于手机）。任何帮助将不胜感激 html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Academia</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Tienda</a>
        <li class="nav-item">
            <a class="nav-link" href="#">Nosotros</a>
        <li class="nav-item">
            <a class="nav-link" href="#">Contacto</a>
      </ul>
    </div>
  </div>
</nav>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

如引导导航栏文档的工作原理部分所述，您可以使用navbar-expand-sm 而不是navbar-expand-lg。这只会在小于 576px(sm) 的屏幕上折叠导航栏。

【讨论】：

谢谢老兄，真的很感激