React Bootstrap NavDropdownalignRight 不起作用

Answer 1

import { Navbar, Nav, NavDropdown } from 'react-bootstrap'
<Nav className="ml-auto">
<NavDropdown alignRight title="Profile" id="collasible-nav-dropdown" >
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>

使用命令

netstat -ntlp

手动终止端口号，然后使用

kill -9 <port number>

并使用

npm start

启动服务器。

Answer 2

今天再次遇到这个问题并想贡献一下：

"react-bootstrap": "^2.4.0"  
"bootstrap": "^5.1.3"  

您可以在 NavDropdown 组件中使用

align="end"

属性

<NavDropdown align="end" title="Dropdown" id="nav-add">
  <NavDropdown.Item onClick={() => showAddDialog(true)}>Add</NavDropdown.Item>
  <NavDropdown.Divider />
  <NavDropdown.Item onClick={() => showAddImageDialog(true)}>Add Image</NavDropdown.Item>
</NavDropdown>

参考：
菜单对齐

Answer 3

你可以在 css 或 boostrap 中做一些事情

使用纯CSS你可以创建这些样式

.custom_nav_link{
  align-self: flex-end!important;  // or  text-align: end !important;
}

您也可以直接放入这些类

align-self-end`
align-self-sm-end //also works with md, lg

如果您将所有内容添加到导航链接，这会将所有内容向右对齐

这给了你这个

这是新的 html

  <div>
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
      <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
      <Navbar.Collapse id="responsive-navbar-nav">
        <Nav className="mr-auto">
          <Nav.Link className="custom_nav_link" href="#features">Features</Nav.Link>
          <Nav.Link className="custom_nav_link" href="#pricing">Pricing</Nav.Link>
          <NavDropdown title="Dropdown" className="custom_nav_link" id="collasible-nav-dropdown">
            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.2">
              Another action
            </NavDropdown.Item>
            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
            <NavDropdown.Divider />
            <NavDropdown.Item href="#action/3.4">
              Separated link
            </NavDropdown.Item>
          </NavDropdown>
        </Nav>
        <div className="searchBar-inline">
          <div className="input-group md-form form-sm form-1 pl-0">
            <div className="input-group-prepend">
              <span
                className="input-group-text purple lighten-3"
                id="basic-text1"
              >
                <MDBIcon className="text-white" icon="search" />
              </span>
            </div>
            <input
              className="form-control my-0 py-1"
              type="text"
              placeholder="Search"
              aria-label="Search"
            />
          </div>
        </div>
        <Nav className="ml-auto paddingLeft5">
          <NavDropdown title="Account" className="custom_nav_link" id="basic-nav-dropdown" alignRight>
            <NavDropdown.Item href="/privacySettings">
              Privacy Settings
            </NavDropdown.Item>
            <NavDropdown.Item href="/signOut">Sign Out</NavDropdown.Item>
          </NavDropdown>
          <NavDropdown title="Help" className="custom_nav_link" id="basic-nav-dropdown" alignRight>
            <NavDropdown.Item href="/contactUs">Contact us</NavDropdown.Item>
            <NavDropdown.Item href="/termsAndConditions">
              Terms and Conditions
            </NavDropdown.Item>
          </NavDropdown>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  </div>

您的导航栏占据了整个宽度，看起来很奇怪。因此，如果您想更改它，只需将容器变小并将其固定或绝对移动到右侧即可。