Reactjs React引导导航下拉列表右对齐不工作

我正在使用react引导并尝试将导航栏菜单向右对齐

            <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引导”：“^1.0.0-beta.10”、“react dom”：“^16.8.4”和“引导”：“^4.3.1”

结果可在所附图像中看到

---

我无法将菜单向右对齐，如有任何帮助，将不胜感激。

您可以在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”导入{Navbar，Nav，NavDropdown}
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

并使用

npm start

启动服务器。你能做点什么吗？尝试一下，我没有太多的经验，所以可能需要一些安全的东西，只要在准备好后标记我就可以了。这是由MDBreact导入引起的，添加了链接（）@Train虽然不知道如何修理它，但我一有时间就去看看。