React-Bootstrap 和末端对齐的导航菜单 w/ .dropdown-menu-end

Question

我正在使用 react-bootstrap 2.3.0，有一个固定的导航栏和一些 NavDropdowns 并且它们都正确对齐。我需要将 class dropdown-menu-end 应用于最后一个下拉菜单 div，但 NavDropdown 组件覆盖了整个导航项和下拉菜单。

应用了 class 的顶部 div 是 NavDropdown 组件呈现的内容，但选择的蓝色 div 是 class 需要呈现的地方是。

有没有办法在 React Bootstrap 中应用这个 class？

<Nav ... >

<NavDropdown title="Tools & Calculators" id="navbarToolsAndCalcsDropdown" className={"dropdown-menu-end"}>
    <Button as={NavDropdown.Item} onClick={this.handleThing}>thing</Button>
    <NavDropdown.Item href="#action">Other Link</NavDropdown.Item>
</NavDropdown>

</Nav>

Answer 1

在 Dropdown.Menu 组件上有一个名为 align 的属性，您必须将其设置为结束:

https://react-bootstrap.netlify.app/components/dropdowns/#dropdown-menu-props

您看不到下拉菜单正确对齐的原因是 class dropdown-menu 被赋予 min-width 共 10rem。当您想要删除 min-width 时，直接在 css 中定位 bootstrap class 或创建您自己的 class 并定位下拉菜单 div :

.dropdownMenu div {
  min-width: 0rem;
}

我创建了一个沙箱来演示此行为：

https://codesandbox.io/s/stupefied-cherry-uedct

React-Bootstrap 和末端对齐的导航菜单 w/ .dropdown-menu-end

React-Bootstrap & end-aligned nav menus w/ .dropdown-menu-end

react-bootstrap