如何正確對齊twitter twitter bootstrap導航欄中的導航欄項目使用反應

Question

我想對齊navbar.js內的導航欄項目（貢獻），但我似乎無法弄清楚。導航欄是一個陣營組成，看起來像下面

navbar.jshere

import React, {PropTypes} from 'react'; 
import { Link, IndexLink } from 'react-router'; 
import { browserHistory, Router, Route } from 'react-router' 
var ReactDOM = require('react-dom'); 

// create classes 
var NavBar = React.createClass({ 
    render: function(){ 
    return(
     <nav className="navbar navbar-inverse navbar-static-top"> 
     <div className="container-fluid"> 
      <div className="navbar-header"> 
      <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> 
       <span className="sr-only">Toggle navigation</span> 
       <span className="icon-bar"></span> 
       <span className="icon-bar"></span> 
       <span className="icon-bar"></span> 
      </button> 
      <NavBrand linkTo={this.props.brand.linkTo} text={this.props.brand.text} /> 
      </div> 
      <div className="collapse navbar-collapse" id="navbar-collapse"> 
      <NavMenu links={this.props.links} /> 
      </div> 
     </div> 
     </nav> 
    ); 
    } 
}); 

var NavBrand = React.createClass({ 
    render: function(){ 
    return (
     <Link to={ this.props.linkTo }> 
     <span className="navbar-brand">{this.props.text}</span> 
     </Link> 
    ); 
    } 
}); 

var NavMenu = React.createClass({ 
    render: function(){ 
    var links = this.props.links.map(function(link){ 
     if(link.dropdown) { 
     return (
      <NavLinkDropdown key={link.text} links={link.links} text={link.text} active={link.active} /> 
     ); 
     } 
     else { 
     return (
      <NavLink key={link.text} linkTo={link.linkTo} text={link.text} active={link.active} /> 
     ); 
     } 
    }); 
    return (
     <ul className="nav navbar-nav"> 
     {links} 
     </ul> 
    ); 
    } 
}); 

var NavLinkDropdown = React.createClass({ 
    render: function(){ 
    var active = false; 
    var links = this.props.links.map(function(link){ 
     if(link.active){ 
     active = true; 
     } 
     return (

     <NavLink key={link.text} linkTo={link.linkTo} text={link.text} active={link.active} /> 

    ); 
    }); 
    return (
     <ul className="nav navbar-nav navbar-right"> 
     <li className={"dropdown" + (active ? "active" : "")}> 
     <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
      {this.props.text} 
      <span className="caret"></span> 
     </a> 
     <ul className="dropdown-menu"> 
      {links} 
     </ul> 
     </li> 
     </ul> 

    ); 
    } 
}); 

var NavLink = React.createClass({ 
    render: function(){ 
    return(
     <li className={(this.props.active ? "active" : "")}> 
     {/*<a href={this.props.linkTo}>{this.props.text}</a>*/} 
     <Link to={ this.props.linkTo }> 
      <span className="NavLink">{this.props.text}</span> 
     </Link> 
     </li> 
    ); 
    } 
}); 

module.exports = NavBar; 

目前，我的導航欄如下所示，

Answer 1

下面的代碼解決了我的對齊問題。

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

Answer 2

給CSS屬性float : left到師或任何你想要對齊:)

Answer 3

使用類navbar-right達到您想要的數值

Answer 4

您可以使用dropdown-menu-right作爲下拉菜單的目標，以便將Contribute導航項右對齊。 bootstrap dropdown alignment docs