React-Bootstrap тянет правую навигацию

Я использую react-bootstrap для стилизации моего сайта. Я хочу добавить Navbar, где все элементы зеркалируются справа.

export default class XNavbar extends React.Component {
  render() {
return (
  <Navbar inverse fluid >

    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">Brand</a>
      </Navbar.Brand>
      <Navbar.Toggle />
    </Navbar.Header>

    <Navbar.Collapse>
      <Nav>
        <NavItem eventKey={1} href="#">Hello</NavItem>
        <NavItem eventKey={2} href="#">World</NavItem>
      </Nav>
    </Navbar.Collapse>

  </Navbar>
)}
}

В результате

Но я действительно хочу, чтобы он был

[                                                           World Hello Brand ]

Я попытался использовать pullRight на <Navbar, но это не сработало. Я также добавил <html dir="rtl">, но это тоже не помогло. Как я могу это сделать?

Ответ 1

Если вы еще этого не поняли, или кто-то еще наткнулся на него. Все, что вам нужно сделать, это добавить ссылку pullRight к фактическому компоненту Nav. Результатом должен быть логотип бренда слева, а навигация - вправо.

return (
  <Navbar inverse fluid >

    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">Brand</a>
      </Navbar.Brand>
      <Navbar.Toggle />
    </Navbar.Header>

    <Navbar.Collapse>
      <Nav pullRight>
        <NavItem eventKey={1} href="#">Hello</NavItem>
        <NavItem eventKey={2} href="#">World</NavItem>
      </Nav>
    </Navbar.Collapse>

  </Navbar>
)}

Ответ 2

На самом деле, согласно документации Bootstrap React pullRight должен это сделать. Но я тоже не смог этого понять. Я нашел рабочее решение, которое я описал здесь.

Ответ 3

Вы можете поместить свои элементы внутри div и float div вправо этим свойством css

.exampleDiv {
   float: right;
 }

Ответ 4

Те из вас, кто, как и я, не могут получить работу pullRight, кажется, что добавление ml-auto работает лучше.

   <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="ml-auto">
        <Nav.Link href="#one">One</Nav.Link>
        <Nav.Link href="#two">Two</Nav.Link>
      </Nav>
    </Navbar.Collapse>

Нашел решение здесь: fooobar.com/info/14297577/...