Question

我在里面创建了带有dropdown-item的 Bootstrap 导航栏，但默认情况下菜单本身无法隐藏。

请点击之前查看图片（默认）：

点击后：

我的代码：

<nav class="navbar navbar-expand-lg navbar-light bg-primary">
<div class="navbar-brand">
    <img src="img/logo.png" />
</div>

<div class="collapse navbar-collapse">
    <div class="navbar-nav flexbox_basic-spaceAround border-yellow">


        <div class="nav-item dropdown">
            <a class="nav-link dropdown-toggle"
               href="#" id="navbarDropdown"
               role="button"
               data-toggle="dropdown"
               aria-haspopup="true"
               aria-expanded="false">
                Stores
            </a>
            <div id="menu1" class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </div>

        <div class="nav-item">Custom Order</div>
        <div class="nav-item">Industry</div>
        <div class="nav-item">Business</div>

        <div class="nav-item">
            <button class="bg-primary">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </div>
</div>

CSS（我正在使用FlexBox CSS3）：

.flexbox_basic-spaceAround {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-around;
    align-items: center;
}

.flexbox_basic-spaceAround div {
    display: flex;
}

我正在使用Boostrap 4-beta-2 btw ...

有什么想法吗？

提前致谢

Answer 1

首先，您应该为具有类名称下拉菜单的div提供 display：none ，点击/暂停菜单按钮后，为下拉菜单div提供显示：阻止

Navbar DropDown项目默认情况下无法隐藏

1 个答案: