React bootstrap Navbar：如何右对齐导航栏项目

Question

我正在尝试在 navbar.js 中右对齐导航栏项目 (Contribute)，但我似乎无法弄清楚。导航栏是一个 React 组件，如下所示，

navbar.js here

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

将 css 属性 float : left 给除法或任何你想要右对齐的东西:)

Answer 2

使用class navbar-right达到你想要的

Answer 3

您可以使用 dropdown-menu-right 定位下拉菜单，使 Contribute 导航项右对齐。 bootstrap dropdown alignment docs

Answer 4

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

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 5

这个适合我

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

Answer 6

最好和最简单的方法是将以下 class 添加到 NAV 节点，如下所示：

<Nav className="ml-auto">

不幸的是，添加 "pullRight" 不是解决方案，它不会起作用。

Answer 7

如果您想让导航看起来像下面的屏幕截图所示：

然后您需要在导航项的 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>

Answer 8

另一种方法是：

<Nav className="ms-auto">

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

Answer 9

这个版本对我有用 - 'v2.0.0-rc.0 (Bootstrap 5.1)'

<Nav className='ms-auto'>

完成，

<Navbar.Collapse id='basic-navbar-nav'>
    <Nav className='ms-auto'>
        <Nav.Link href='/cart'>Cart</Nav.Link>
        <Nav.Link href='/login'>Sign In</Nav.Link>
    </Nav>
</Navbar.Collapse>

Answer 10

对于 bootstrap 版本 5 的那些，我们必须使用 ms-auto 而不是 ml-auto，因为 class 名称已经迁移和更改。

.ml-* and .mr-* to .ms-* and .me-*

Answer 11

在 Bootstrap 5 中你可以使用 ms-auto 而不是 ml-auto 或 mr-auto

Answer 12

到目前为止，我从他们的官方文档中发现了一种更简单的方法，尽管它可能有点不合常规。

这是代码

<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
  <Container>
  <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
  <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  <Navbar.Collapse id="responsive-navbar-nav">
{/*This totally empty navbar with the class 'me-auto' is significant. */}
    <Nav className="me-auto">
    </Nav>
{/*It is responsible for the other nav bar content moving to the right.*/}
    <Nav>
      <Nav.Link href="#deets">More deets</Nav.Link>
      <Nav.Link eventKey={2} href="#memes">
        Dank memes
      </Nav.Link>
    </Nav>
  </Navbar.Collapse>
  </Container>
</Navbar>

Sample of Code

简单的技巧是在您自己的带有 class me-auto 的导航栏内容之前添加一个空的导航栏，如下所示。

{/*This is the hack */}
    <Nav className="me-auto">
    </Nav>
{/*Any nav bar created beneath this now aligns to the right.*/}

有不明白的地方可以提问

React bootstrap Navbar：如何右对齐导航栏项目

React bootstrap Navbar: How to right align a navbar item

javascript

navbar

twitter-bootstrap

reactjs

react-bootstrap