时间戳

首页 > 解决方案 > reactstrap 导航栏下拉菜单不向右移动

reactjs - reactstrap 导航栏下拉菜单不向右移动

问题描述

import {Navbar, NavbarBrand,NavbarToggler, Nav,NavItem, NavLink, UncontrolledDropdown, DropdownToggle, DropdownItem, DropdownMenu, Collapse} from 'reactstrap'

<Navbar color='dark' dark expand='md'>
<NavbarBrand>
      My blog

 </NavbarBrand>
<NavbarToggler onClick={this.toggle}/>

<Collapse isOpen={this.state.isOpen} navbar>
     <Nav className='mr-auto' navbar>
              <NavItem>
             <NavLink href="/">
                       link
             </NavLink>
              </NavItem>
    </Nav>
<UncontrolledDropdown>
      <DropdownToggle nav caret>
      options
       </DropdownToggle>
     <DropdownMenu right>
            <DropdownItem>
             Option 1
             </DropdownItem>
             <DropdownItem>
             login
             </DropdownItem>
        <DropdownItem divider />
               <DropdownItem>
                 logout
              </DropdownItem>
          </DropdownMenu>
 </UncontrolledDropdown>
 </Collapse>
</Navbar>

在这个导航栏中我有<DropdownMenu right>，但它仍然在左侧 在此处输入图像描述

我对此很陌生，因此对如何解决这个问题一无所知。我能得到一些帮助吗？

标签： reactjsreactstrap

解决方案

尝试向组件添加ml-auto类UncontrolledDropdown。

<UncontrolledDropdown className="ml-auto">

推荐阅读