css - reactstrap <UncontrolledDropdown> 正在离开视口(viewport)，mr/ml-auto 和 float-right/left 不工作

Question

基本上，我有一个 <UncontrolledDropdown>展开时会超出视口(viewport)，因此无法查看。

我试过各种方法让它下拉到左边而不是右边，但都没有用。例如，.mr-auto , .ml-auto , .float-left , 和 .float-right .

这是该元素的 HTML 和 SCSS:

<UncontrolledDropdown nav inNavbar>
    <DropdownToggle className='custom-toggle' nav>
        <Button  color='primary'>
        <i className="far fa-user"></i>
        </Button>
    </DropdownToggle>
    <DropdownMenu>
        <DropdownItem>
            Account Settings
        </DropdownItem>
        <DropdownItem divider />

        <Link to='/auth/signout' className='signout'>
            <DropdownItem>
                Sign Out
                <i className='fas fa-power-off float-right'>
                </i>
            </DropdownItem>
        </Link>

    </DropdownMenu>
</UncontrolledDropdown>

---

nav {

    .custom-nav-link {
        margin-top: 10px;
    }

    .custom-toggle {
        padding-right: 0 !important;

        button {
            width: 56px;
            height: 40px;

            i {
                margin-top: 3px;
                font-size: 20px;
            }
        }

        @media all and (max-width: 767px) {
            button {
                width: 100%;
                height: 40px;
            }
        }
    }

    .signout {
        button {
            color: $red;

            i {
                margin-top: 3px;
            }

            &:hover, &:focus, &:active {
                background-color: $red;
                color: #FFFFFF;
                outline: none;
            }
        }
    }
}

关于如何解决这个问题的建议？

Answer 1

尝试对齐下拉菜单的方向:

<DropdownMenu right> 
  ...