React-Bootstrap pull right navbar

Я использую react-bootstrap для стилизации своего сайта. Я хочу добавить Navbar, где все элементы зеркалируются справа.React-Bootstrap pull right 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">, но это тоже не помогло. Как мне это сделать?

источник

2015-12-04 itaied

Вы пытались добавить 'pullRight' в' Navbar.Header'? –

Да, он ничего не сделал. Я попытался добавить 'pullRight' в каждый элемент вышеприведенного кода. – itaied

интересный. [documentation] (https://react-bootstrap.github.io/components.html#navs) говорит, что он должен применяться к элементам 'Nav'. –

Вы можете поместить свои элементы внутри DIV и чем флоат DIV направо от этого CSS собственности

.exampleDiv { 
    float: right; 
}

источник

2015-12-04 09:11:47 RAP

Это также не работает. Он сжимает 'exampleDiv' справа и помещает каждый элемент в другую строку. – itaied

Вы можете создать jsfiddle – RAP

В случае, если вы еще не поняли это, или кто-то еще натыкается на него. Все, что вам нужно сделать, это добавить pullRight prop к актуальному 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> 
)}

источник

2016-03-05 16:01:08

React-Bootstrap pull right navbar

ответ

Смежные вопросы