Html 导航栏下拉菜单扩展导航，而不是将光标悬停在导航栏上

我有一个

nav

，它有一个内部

下拉列表

，但当我弹出下拉列表时，它会展开整个

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>

---

有人能告诉我我缺少什么吗？

添加以下CSS将获得您想要的弹出效果：

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

---

完成

您没有使用

react-strap

和Bootstrap的jquery？这是正确的@AkberIqbal。这样做的主要原因是，整个团队中的设计师不是开发人员，因此它提供了跨团队的兼容性。但是，除了我没有使用组件包装器之外，这对引导标记没有任何影响。我无法在处复制它-您可以在某处共享此行为吗？@MikePerrenoud您只是手动切换

show

类吗？Bootstrap通过js应用一个

位置：绝对
内联，以及一些其他样式。如果你不想让它影响它的容器高度，那么它需要是绝对的，所以我不是要开始显示，我只是让属性来做（即默认情况下它会弹出）。
.navbar-nav .dropdown-menu{
  position:absolute; right:0;
}
@media screen and (max-width:768px){
  .navbar-nav .dropdown-menu{ left:0; }
}