React NavBar无法将项目对齐到右侧

时间:2017-07-20 18:51:52

标签: css twitter-bootstrap reactjs ecmascript-6

我正在尝试拆分导航项并将它们左右对齐。我该如何更改代码?我正在使用bootstrap,为什么navbar-right属性不起作用?

render() {
    return (
      <nav style={{ position: relative, top: -40px }}>
        <div className="container-fluid">
          <Link to="/" className="navbar-brand">Dribbble Clone</Link>
          <ul className="nav navbar-nav navbar-left">
            <li className="nav-item">
              Blog
            </li>
            <li className="nav-item">
              Podcast
            </li>
            <li className="nav-item">
              Meetups
            </li>
            <li className="nav-item">
              Jobs
            </li>
          </ul>
          <ul className="nav navbar-nav navbar-right" 
            style={{ justifyContent: 'flex-end' }}>
            <li className="nav-item">
              Signin
            </li>
            <li className="nav-item">
              Signup
            </li>
          </ul>
        </div>
      </nav>
    );

谢谢

1 个答案:

答案 0 :(得分:0)

试试这个

render{
const style = {
                margin: 0,
                top: 0,
                right: 60,
             bottom:20,
                left: 'auto',
                position: 'fixed',
            };
return(
<nav style={style}>
);

}