Navbar Dropdown 扩展 Nav 而不是悬停在答案

【问题标题】：Navbar Dropdown expands Nav instead of hovering overNavbar Dropdown 扩展 Nav 而不是悬停在
【发布时间】：2020-05-13 09:00:53
【问题描述】：

我有一个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>

谁能引导我找到我所缺少的东西？

【问题讨论】：

你没有使用react-strap 并使用Bootstrap的jquery？
这是正确的@AkberIqbal。主要原因是整个团队的设计师不是 React 开发人员，因此它提供了跨团队的兼容性。但是，除了我没有使用组件包装器之外，这对 Bootstrap 标记没有任何影响。
我无法在stackblitz.com/edit/react-9l2cht 复制此行为 - 你能在某处分享此行为吗？
@MikePerrenoud 你只是手动切换show 类吗？ Bootstrap 通过其 js 应用 position: absolute 内联以及其他一些样式。如果您不希望它影响其容器高度，则需要为 absolute。
@sallf 所以我不会启动show，我只是让归因这样做（即默认情况下它会被弹出）。

标签： html css reactjs twitter-bootstrap

【解决方案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

【讨论】：