Question

我正在使用navbar navbar-expand-xl隐藏我的导航菜单，并且它的分辨率低于1200px，但我的collapse按钮隐藏了1000px然后显示。我需要更改以使我的折叠按钮显示小于1200px而不是1000px。

我的代码：

<nav class="navbar navbar-expand-xl navbar-dark fixed-top menu-nawigacyjne">
        <a class="navbar-brand" href="#">Insurance Group</a>
        <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
          Menu<span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar">
          <ul class="navbar-nav  mr-auto">
            <li class="nav-item active">
              <a class="p-2 text-white"  href="/stronaGlowna">Strona Główna </a>
            </li>
                <li class="nav-item active">
              <a class="p-2 text-white" href="/przegladajUbezpieczenia">Ubezpieczenia </a>
            </li>
             <li class="nav-item active">
          <a class="p-2 text-white" href="/informacje">Informacje </a>

        </li>
          </ul>
          <div class="login-form">

            <form action ="/stronaGlowna" method = "post" class="form-inline mt-2 mt-md-0">


                    <input class="form-control mr-sm-2" type="text" id ="login" name = "login" placeholder="Adres e-mail" required >
                    <input class="form-control mr-sm-2" type="password" id = "haslo" name = "haslo" placeholder="Hasło" required >
                    <input type="hidden" name="_csrf"  value="f20d6efe-5ecb-4368-bada-a55dfdd67fb5" /> 
                    <button class="btn btn-success custom-width" type="submit">Zaloguj się</button>
                    <a class="p-2 text-white" href="/przypomnijHaslo">Nie pamiętam hasła </a>
                </form>
          </div>
        </div>
      </nav>

您也可以在现场查看：http://www.aplikacja-ubezpieczenia.pl

Answer 1

您只需要从切换器中删除d-lg-none即可。这样可以防止切换器显示在lg及以上。当导航栏在xl之后折叠时，切换器仍然处于隐藏状态，因为lg断点高于992像素。

您不需要在切换器上使用anu d-*类，因为navbar-expand-xl会自动处理切换器显示。

Bootstrap navbar-expand-xl collapse

1 个答案: