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">, но это тоже не помогло. Как мне это сделать?


reactjs html react-bootstrap
person itaied    schedule 04.12.2015    source источник
comment
Вы пытались добавить pullRight к Navbar.Header?   -  person Tahir Ahmed    schedule 04.12.2015
comment
Да, это ничего не дало. Я попытался добавить pullRight к каждому элементу в приведенном выше коде.   -  person itaied    schedule 04.12.2015
comment
интересный. В документации говорится, что его следует применять к Nav элементам.   -  person Tahir Ahmed    schedule 04.12.2015
comment
вы можете обновить свой код в этой скрипке jsfiddle.net/t9sf5u9n   -  person Pardeep Dhingra    schedule 04.12.2015
comment
Я не знаю, как добавить компоненты реакции, так как я также использую babel и webpack..   -  person itaied    schedule 04.12.2015
comment
В моем случае мне нужно установить стиль Nav. Проверьте этот ответ.   -  person Vladimir Vlasov    schedule 28.03.2019

Ответы (4)


arrow_upward
21
arrow_downward

Для тех из вас, как я, которые не могут получить работу 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>

Нашел решение здесь: https://stackoverflow.com/a/54684784/95552

person Ardee Aram    schedule 04.09.2019

arrow_upward
15
arrow_downward

В случае, если вы еще не поняли это, или кто-то еще наткнулся на это. Все, что вам нужно сделать, это добавить свойство 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>
)}
person Ryan Ore    schedule 05.03.2016
comment
Я попытался сделать это, но моя результирующая страница выглядит как эта. Любая идея, почему это может быть так? Я почти уверен, что у меня нет никакого CSS, который мог бы возиться с позицией... - person pfincent; 31.12.2018
comment
Извините @pfincent, я думаю, мне нужно увидеть ваш код или прямую ссылку на страницу. - person Ryan Ore; 02.01.2019
comment
pullRight у меня не работает, а className="ml-auto" работает. Нашел решение здесь: stackoverflow.com/a/54684784/95552 - person Ardee Aram; 04.09.2019
comment
Я думаю, что <Nav.Item>Menu Item</Nav.Item> - правильный синтаксис. - person Jacob Nelson; 24.01.2020

arrow_upward
5
arrow_downward

Собственно, согласно документации Bootstrap React pullRight должен это делать. Но я тоже не смог этого осознать. Я нашел рабочее решение, которое описал здесь. Просто используйте <Nav className="ml-auto">

person Dan    schedule 14.02.2019
comment
pullRight у меня не работает, а className="ml-auto" работает. Решение нашел здесь: stackoverflow.com/a/54684784/95552 - person Ardee Aram; 04.09.2019
comment
Ну, вы указываете на ту же ссылку, что и я. Непонятно зачем это нужно.... - person Dan; 16.11.2019

arrow_upward
0
arrow_downward

Вы можете поместить свои элементы внутри div, а затем поместить div вправо с помощью этого свойства css.

.exampleDiv {
   float: right;
 }
person Raza Poonja    schedule 04.12.2015
comment
Тоже плохо работает. Он сжимает exampleDiv вправо и помещает каждый элемент в другую строку. - person itaied; 04.12.2015
comment
вы можете создать jsfiddle - person Raza Poonja; 04.12.2015