Question

我搜索了很多，但还没有找到解决问题的简单方法。当您点击它打开的按钮并且不再关闭时，任何可能缺少的建议？提前致谢

<nav class="navbar navbar-expand-md sticky-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">
            <img src="midia/logo.jpg" alt="Tutto Piccolo">
        </a>
        <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#navbarResponsive" >
            <span class="navbar-toggler-icon"> </span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#home">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#sobre">Sobre a Tutto</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#colecao">Coleção</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contato">Contato</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#cliente">Área do Cliente</a>
                </li>
            </ul>

        </div>

    </div>
</nav>

Answer 1

在Bootstrap Docs中，它声明了

Navbars可以利用.navbar-toggler，.navbar-collapse和.navbar-expand {-sm | -md | -lg | -xl}类在内容在按钮后面折叠时进行更改。与其他实用程序结合使用，您可以轻松选择何时显示或隐藏特定元素。

对于永不崩溃的导航栏，请在导航栏上添加.navbar-expand类。对于始终崩溃的导航栏，请勿添加任何.navbar-expand类。

所以，将<nav class="navbar navbar-expand-md sticky-top">更改为<nav class="navbar sticky-top">

JSfiddle示例。

再次单击时，导航按钮不关闭菜单

1 个答案: