Javascript React引导导航栏：如何右对齐导航栏项

我试图在

navbar.js

中右对齐一个navbar项（贡献），但我似乎无法理解。导航栏是一个React组件，如下所示：

navbar.js

import React，{PropTypes}来自'React'；
从“反应路由器”导入{Link，IndexLink}；
从“react Router”导入{browserHistory，Router，Route}
var ReactDOM=require（'react-dom'）；
//创建类
var NavBar=React.createClass({
render:function（）{
返回(
切换导航
);
}
});
var NavBrand=React.createClass({
render:function（）{
返回(
{this.props.text}
);
}
});
var NavMenu=React.createClass({
render:function（）{
var links=this.props.links.map（函数（链接）{
如果（链接下拉列表）{
返回(
);
}
否则{
返回(
);
}
});
返回(

{links}

);
}
});
var NavLinkDropdown=React.createClass({
render:function（）{
var-active=false；
var links=this.props.links.map（函数（链接）{
如果（link.active）{
主动=真；
}
返回(
);
});
返回(



{links}



);
}
});
var NavLink=React.createClass({
render:function（）{
返回(

{/**/}
{this.props.text}

);
}
});
module.exports=导航栏；

目前，我的导航栏如下所示

---

将css属性

float:left

赋给分区或要右对齐的对象：）

使用类

导航栏right

达到所需的位置您可以将下拉菜单与

下拉菜单right

对准贡献导航项

下面的代码解决了我的对齐问题

var NavMenu = React.createClass({
  render: function(){
    var links = this.props.links.reduce(function(acc, current){      
      current.dropdown ? acc.rightNav.push(current) : acc.leftNav.push(current);
      return acc;
    }, { leftNav: [], rightNav: [] });
    return (
      <div>
        <ul className="nav navbar-nav">
          {links.leftNav.map( function(link) {
            return <NavLink key={link.text} linkTo={link.linkTo} text={link.text} active={link.active} />
          })}
        </ul>
        {
          links.rightNav.length > 0 ?
            <ul className="nav navbar-nav navbar-right">
              {
                links.rightNav.map( function(link) {
                  return <NavLinkDropdown key={link.text} links={link.links} text={link.text} active={link.active} />
                })
              }
            </ul> : false
        }
      </div>
    );
  }
});

var NavMenu=React.createClass({
render:function（）{
var links=this.props.links.reduce（函数（acc，current）{
current.dropdown？acc.rightNav.push（当前）：acc.leftNav.push（当前）；
返回acc；
}，{leftNav:[]，righnav:[]}）；
返回(

{links.leftNav.map（函数（link））{
返回
})}

{
links.rightNav.length>0？

{
links.rightNav.map（函数（链接）{
返回
})
}
：错误
}
);
}
});

这个适合我

<Navbar>
    <Navbar.Brand href="/">MyBrand</Navbar.Brand>
    <Navbar.Toggle />
    <Navbar.Collapse>
        <Nav className="justify-content-end" style={{ width: "100%" }}>
            ...
        </Nav>
    </Navbar.Collapse>
</Navbar>

我的品牌
...

最有效、最简单的方法是向导航节点添加以下类，如下所示：

<Nav className="ml-auto">

---

不幸的是，添加“pullRight”并不是解决方案，也不会起作用

如果要使导航看起来像下面的屏幕截图所示：

然后，您需要将

Nav

上的class

container fluid

和

Nav.Item

上的class

ml auto

应用于要右对齐的导航项

代码如下：

<Navbar bg="dark" variant="dark">
  <Nav className="container-fluid">
    <Nav.Item>
      <Navbar.Brand as={Link} to="/">Demo App</Navbar.Brand>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link as={Link} to="/user-list">User List</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link onClick={handleClickUserLogOut}>Log Out</Nav.Link>
    </Nav.Item>
    <Nav.Item className="ml-auto">
      <Nav.Link>Hi fname lname!</Nav.Link>
    </Nav.Item>
  </Nav>
</Navbar>

演示应用程序
用户列表
注销
嗨，fname，lname！

您是否希望订单保持不变，品牌保持左对齐？或者您正在寻找“从右到左”样式的解决方案？尝试将

right

添加到

dropdown menu

中，从而使

dropdown menu变为right

，但不幸的是，它没有将导航栏项

contribution

向右拉。看起来标记可能有问题。您的下拉菜单是

li

中的

ul

。类<代码>下拉菜单右将下拉菜单与父级菜单右对齐。除非

li

项延伸到navbar容器的末端，否则“贡献”下拉列表将不会移动。我认为您已经了解了一些事情。经过多次尝试和黑客攻击，这一行代码救了我。这管用！

<Navbar bg="dark" variant="dark">
  <Nav className="container-fluid">
    <Nav.Item>
      <Navbar.Brand as={Link} to="/">Demo App</Navbar.Brand>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link as={Link} to="/user-list">User List</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link onClick={handleClickUserLogOut}>Log Out</Nav.Link>
    </Nav.Item>
    <Nav.Item className="ml-auto">
      <Nav.Link>Hi fname lname!</Nav.Link>
    </Nav.Item>
  </Nav>
</Navbar>