Bootstrap 切换器中的下拉不起作用/引导

wvmv3b1j 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(2)|浏览(155)

我有很多列表的导航栏。我想在移动的设备上使用下拉菜单和togler。问题是当导航栏被切换到下拉菜单后，触摸将关闭整个togler。

<nav class="navbar navbar-expand-xl navbar-light sticky-top py-3 d-block" data-navbar-on-scroll="data-navbar-on-scroll">
      <div class="container"><a class="navbar-brand" href="index.html"><img src="assets/img/gallery/logo-n.png" height="45" alt="logo" /></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 class="collapse navbar-collapse border-top border-lg-0 mt-4 mt-lg-0" id="navbarSupportedContent">
          <ul class="navbar-nav ms-auto pt-2 pt-lg-0 font-base">
            <li class="nav-item px-2"><a class="nav-link active" aria-current="page" href="index.html">Domů</a></li>
            <li class="nav-item dropdown zakldropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Základní škola
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Chrakteristika ZŠ</a></li>
            <li><a class="dropdown-item" href="#">Organizace školního roku</a></li>
            <li><a class="dropdown-item" href="#">Školská rada</a></li>

        </ul>
        <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="web-development.html">Mateřská škola</a></li>
        <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Jídelna</a></li>
        <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">EKOškola MŠ a ZŠ</a></li>
        <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Družina</a></li>
        <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Málinka z. s.</a></li>
        <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Dokumenty</a></li>
        <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Kontakty</a></li>
        </ul>

      </div>
      </div>
      </div>
    </nav>

twitter-bootstrap

来源：https://stackoverflow.com/questions/73287801/dropdown-in-toggler-dont-work-bootstrap

2条答案

按热度按时间

mi7gmzs61#

我曾经遇到过同样的问题。在我的例子中，我没有在代码中添加下面这行代码

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

如果您有这段代码，请确保将这部分代码注解掉

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->

确保您拥有他们推荐的模板：入门模板
https://getbootstrap.com/docs/5.0/getting-started/introduction/

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

wfveoks02#

<nav class="navbar navbar-expand-xl navbar-light sticky-top py-3 d-block" data-navbar-on-scroll="data-navbar-on-scroll">
    <div class="container">
        <a class="navbar-brand" href="index.html">
            <img src="assets/img/gallery/logo-n.png" height="45" alt="logo" />
        </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 class="collapse navbar-collapse border-top border-lg-0 mt-4 mt-lg-0" id="navbarSupportedContent">
            <ul class="navbar-nav ms-auto pt-2 pt-lg-0 font-base">
                <li class="nav-item px-2"><a class="nav-link active" aria-current="page" href="index.html">Domů</a></li>
                <li class="nav-item px-2 dropdown zakldropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Základní škola
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <li><a class="dropdown-item" href="#">Chrakteristika ZŠ</a></li>
                        <li><a class="dropdown-item" href="#">Organizace školního roku</a></li>
                        <li><a class="dropdown-item" href="#">Školská rada</a></li>
                    </ul>
                </li>
                <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="web-development.html">Mateřská škola</a></li>
                <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Jídelna</a></li>
                <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">EKOškola MŠ a ZŠ</a></li>
                <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Družina</a></li>
                <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Málinka z. s.</a></li>
                <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Dokumenty</a></li>
                <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Kontakty</a></li>
            </ul>
        </div>
    </div>
</nav>

我检查它是否工作，但您忘记关闭标签

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

我来回答

Bootstrap 切换器中的下拉不起作用/引导

2条答案

相关问题

热门标签

最新问答