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

Posted 2023-03-23

【中文标题】reactstrap <UncontrolledDropdown> 超出视口，mr/ml-auto 和 float-right/left 不起作用

【英文标题】：reactstrap <UncontrolledDropdown> is rending out of viewport, mr/ml-auto and float-right/left not working

【发布时间】：2018-08-09 02:31:17

【问题描述】：

基本上，我有一个<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;
            
        
    

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

【参考方案1】：

尝试调整下拉菜单方向：

<DropdownMenu right> 
  ...

【讨论】：

啊，就在文档中，就像白天一样...reactstrap.github.io/components/dropdowns。感谢您引起我的注意！