React-Bootstrap多级NavDropdown菜单如何实现向右级联显示？

要让子菜单向右偏移展开、不覆盖上级菜单，你可以通过自定义CSS调整嵌套下拉菜单的位置，具体步骤如下：

1. 给嵌套的NavDropdown添加自定义类名 #

修改组件代码，给内层的NavDropdown加上自定义类名，比如sub-dropdown：

import { Component } from "react";
import { Nav, Navbar, NavDropdown } from "react-bootstrap";
import "./CustomDropdown.css"; // 引入自定义样式文件

export default class App extends Component {
    render() {
        return <Navbar className="d-flex" expand="lg">
            <Nav>
                <NavDropdown title="String">
                    {/* 给内层下拉菜单添加自定义类 */}
                    <NavDropdown title="Numeric" className="sub-dropdown">
                        <NavDropdown.Item onClick={() => {
                            // ...
                        }}>Validate</NavDropdown.Item>
                        <NavDropdown.Item onClick={() => {
                            // ...
                        }}>Create</NavDropdown.Item>
                        <NavDropdown.Item onClick={() => {
                            // ...
                        }}>Create sequence</NavDropdown.Item>
                        <NavDropdown.Item onClick={() => {
                            // ...
                        }}>Value of</NavDropdown.Item>
                    </NavDropdown>
                    // ...
                </NavDropdown>
            </Nav>
        </Navbar>;
    }
}

2. 编写自定义CSS样式 #

创建CustomDropdown.css文件，添加以下样式调整子菜单位置：

/* 调整子下拉菜单的展开位置 */
.sub-dropdown .dropdown-menu {
    left: 100%; /* 让子菜单从父菜单右侧开始展开 */
    top: 0; /* 与父菜单顶部对齐 */
    margin-left: 0.125rem; /* 可选：添加少量间距避免与父菜单紧贴 */
}

完成以上设置后，内层的"Numeric"子菜单就会向右级联展开，不会覆盖上级的"String"菜单。如果有更多层级的嵌套下拉，给每个内层NavDropdown都加上sub-dropdown类名即可。

内容的提问来源于stack exchange，提问作者Kevin Dean