reactstrap <UncontrolledDropdown>正在脱离视口，mr/ml-auto 和 float-right/left 不起作用 [英] reactstrap <UncontrolledDropdown> is rending out of viewport, mr/ml-auto and float-right/left not working

问题描述

本质上，我有一个 <UncontrolledDropdown>，它在展开时会离开视口，因此无法查看.

Essentially, I have a <UncontrolledDropdown> that when expanded is going out of the view port so it can't be viewed.

我尝试了各种方法将其下拉到左侧而不是右侧，但都没有奏效.例如，.mr-auto、.ml-auto、.float-left 和 .float-right>.

I have tried various methods to get it to dropdown to the left and not the right, but they have not worked. For example, .mr-auto, .ml-auto, .float-left, and .float-right.

这是元素的 HTML 和 SCSS:

Here is the HTML and the SCSS for the element:

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

有关如何解决此问题的建议?

Suggestions for how to fix this?

推荐答案

尝试调整下拉菜单方向:

Try aligning your dropdown menu direction:

<DropdownMenu right> 
  ...

这篇关于reactstrap &lt;UncontrolledDropdown&gt;正在脱离视口，mr/ml-auto 和 float-right/left 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！