reactstrap <UncontrolledDropdown> 超出视口，mr/ml-auto 和 float-right/left 不起作用

Question

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

我尝试了各种方法让它下拉到左边而不是右边，但它们没有奏效。例如，.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> 
  ...