Блог

У меня есть выпадающее меню под раскрывающимся списком информации о пользователе на панели навигации с помощью react bootstrap. Все работает правильно, но выпадающее меню сдвинуто слишком далеко вправо, что приводит к его отключению в правой части экрана. Мне нужно сдвинуть его влево, но, похоже, никакие параметры не работают. Есть ли способ сделать это?

Вот скриншот: введите описание изображения здесь

код для элемента

     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>
            )
        }
    }
 

Вы можете использовать right свойство (при условии, что вы используете position: absolute или position: relative ), чтобы указать расстояние от правой части, которое вы хотели бы иметь (пример: right: 3em; ).

Возможно, вы могли бы попробовать плавающий влево с заполнением?

например

#DropDownMenu { float: слева; отступ: 5 пикселей; }