Question

我有一个nav，它有一个内部dropdown，但是当我弹出下拉菜单时，它会展开整个nav。我知道我缺少一个类或一些HTML，但是我似乎无法调和我所缺少的内容。

<nav className="navbar navbar-dark fixed-top bg-dark flex-md-nowrap shadow">
    <a className="navbar-brand col-sm-3 col-md-2 mr-0" href="/">
        <i className="fa fa-home"></i> Seeker
    </a>
    <input className="form-control form-control-dark w-100 mw-100" type="text" placeholder="Search" aria-label="Search" />
    <ul className="navbar-nav px-3">
        <li className="nav-item dropdown">
            <a id="navbarDropdown" className="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                <i className="fa fa-user"></i>
            </a>
            <div className="dropdown-menu" aria-labelledby="navbarDropdown">
                <a className="dropdown-item" href="#">Mike</a>
                <a className="dropdown-item" href="#">Log Out</a>
            </div>
        </li>
    </ul>
</nav>

它确实像这样包装，因为它本身就是一个名为Menu的React组件。

<div className="container-fluid">
    <Menu />
    <div className="row mt-2">
        <Sidebar />
        <div className="container ml-n2 mt-2">
            <h1><i className="fa fa-shield"></i> Admin</h1>
        </div>
    </div>
</div>

有人能引导我找到我所缺少的吗？

Answer 1

添加以下CSS将为您带来所需的弹出效果：

.navbar-nav .dropdown-menu{
  position:absolute; right:0;
}
@media screen and (max-width:768px){
  .navbar-nav .dropdown-menu{ left:0; }
}

完成working stackblitz here

导航栏下拉菜单会扩展导航，而不是将鼠标悬停在

1 个答案: