【问题标题】:React NavBar can't align items to the right sideReact NavBar 无法将项目对齐到右侧
【发布时间】:2023-03-14 18:24:01
【问题描述】:

我正在尝试拆分导航项并将它们左右对齐。我应该如何更改代码?我正在使用引导程序,为什么 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>
    );

谢谢

【问题讨论】:

  • top 属性中的 style 属性应该是一个字符串。所以,top: '-40px'。与您的 position 属性相同。
  • @dogui 是的,谢谢,这是一个愚蠢的错字,但它仍然没有解决我的问题

标签: css twitter-bootstrap reactjs ecmascript-6


【解决方案1】:

试试这个

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

}

【讨论】:

  • 很高兴!!
猜你喜欢
  • 2021-08-27
  • 2017-07-07
  • 2021-09-13
  • 2021-06-21
  • 2023-01-26
  • 2021-09-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多