Question

我正在使用react bootstrap并尝试将NavBar菜单向右对齐

            <Nav className="ml-auto paddingLeft5" alignRight>
                <NavDropdown title="Account" 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" id="basic-nav-dropdown" alignRight>
                    <NavDropdown.Item href="/contactUs">Contact us</NavDropdown.Item>
                    <NavDropdown.Item href="/termsAndConditions">Terms and Conditions</NavDropdown.Item>
                </NavDropdown>
            </Nav>

但是，这似乎不起作用。我正在使用“ react-bootstrap”：“ ^ 1.0.0-beta.10”，“ react-dom”：“ ^ 16.8.4”和“ bootstrap”：“ ^ 4.3.1”。

结果可以在所附图像中看到。

我无法使菜单向右对齐，将不胜感激。

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

您可以在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>

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

React Bootstrap NavDropdown alignRight无法正常工作

2 个答案: