reactstrap 正在退出视口，mr / ml

reactstrap 正在退出视口，mr / ml-auto和float-right / left不起作用(reactstrap is rending out of viewport, mr/ml-auto and float-right/left not working)

实质上，我有一个<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; } } } }

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

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

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.

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?