React Bootstrap Navbar:如何右对齐导航栏项 [英] React bootstrap Navbar: How to right align a navbar item

问题描述

我试图在navbar.js内右对齐导航栏项(贡献)，但似乎无法弄清楚.导航栏是一个React组件，外观如下所示，

I'm trying to right align a navbar item (Contribute) within a navbar.js but I can't seem to figure it out. The navbar is a React component and looks like the following,

navbar.js

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

Presently, my navbar looks like the following,

推荐答案

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

The below code solved my issue of alignment.

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>
    );
  }
});

这篇关于React Bootstrap Navbar:如何右对齐导航栏项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！