如何将下拉菜单向左移动？

Question

我的导航栏上的用户信息下拉菜单下方有一个下拉菜单，使用 react bootstrap。一切正常，但下拉菜单向右移动太远，导致它被屏幕右侧截断。我需要将其向左移动，但似乎没有任何选项有效。有没有办法做到这一点？

截图如下： enter image description here

元素的代码

    function LoginButtonOrUserInfo() {
        if(state.userInfo === undefined) {
            return (
                <Button className='ml-auto' onClick={onLoginClicked}>
                    Login
                </Button>
            )
        } else {
            return (
                <NavDropdown id="navbar-user-info-dropdown" title="User Info" className='ml-auto'>
                    <NavDropdown.ItemText>
                        Welcome, {state.userInfo.firstName} {state.userInfo.lastName}
                    </NavDropdown.ItemText>
                    <NavDropdown.Divider></NavDropdown.Divider>
                    <NavDropdown.Item>
                        <Button onClick={onLogoutClicked}>
                            Logout
                        </Button>
                    </NavDropdown.Item>
                </NavDropdown>
            )
        }
    }

Answer 1

您可以使用right 属性（假设您使用position: absolute 或position: relative）来指定您希望拥有的与右边的距离（例如：right: 3em;）。

Answer 2

您可以尝试使用填充向左浮动？

例如

#dropdownMenu { 浮动：左；填充：5px； }