React-Bootstrap pull right navbar

Używam react-bootstrap do stylizacji mojej strony. Chcę dodać Navbar, gdzie wszystkie elementy są odzwierciedlone po prawej stronie.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> 
)} 
}

Rezultatem jest

Ale to, co faktycznie ma to być

[               World Hello Brand ]

Próbowałem za pomocą pullRight na <Navbar ale to nie działa. Dodałem także <html dir="rtl">, ale to też nie pomogło. Jak mogę to zrobić?

Źródło

2015-12-04 itaied

Czy próbowałeś dodać 'pullRight' do' Navbar.Header'? –

Tak, to nic nie robiło. Próbowałem dodać 'pullRight' do każdego elementu w powyższym kodzie. – itaied

interesujące. [documentation] (https://react-bootstrap.github.io/components.html#navs) mówi, że powinno być stosowane w elementach 'Nav'. –

można umieścić elementy wewnątrz div i div niż pływaka do prawej przez tę właściwość css

.exampleDiv { 
    float: right; 
}

Źródło

2015-12-04 09:11:47 RAP

To także nie działa dobrze. Zmniejsza 'exampleDiv' w prawo i umieszcza każdy element w innej linii. – itaied

możesz utworzyć jsfiddle – RAP

W przypadku, gdy nie są już zdobione to, czy ktoś inny potyka się na nim. Wszystko, co powinieneś zrobić, to dodać propozycję pullRight do rzeczywistego komponentu Nav. Rezultatem powinno być logo marki po lewej stronie, a nawigacja w prawo.

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

Źródło

2016-03-05 16:01:08

React-Bootstrap pull right navbar

Odpowiedz

Powiązane problemy