2015-12-04 31 views
7

Web sitemi şekillendirmek için react-bootstrap kullanıyorum. Tüm öğelerin sağa yansıtıldığı Navbar eklemek istiyorum.React-Bootstrap çekme doğru 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> 
)} 
} 

sonuç enter image description here

olduğu Ama aslında bu <Navbar üzerinde pullRight kullanarak denedim ama işe yaramadı

[               World Hello Brand ] 

olmak istediğini. Ayrıca <html dir="rtl"> ekledim, ancak bu da yardımcı olmadı. Nasıl yapabilirim?

+0

Navbar.Header'a 'pullRight' ekleme yapmayı denediniz mi? –

+0

Evet, hiçbir şey yapmadı. Yukarıdaki koddaki her öğeye 'pullRight 'eklemeyi denedim. – itaied

+0

ilginç. [document] (https://react-bootstrap.github.io/components.html#navs), Nav 'öğelerinde uygulanması gerektiğini söylüyor. –

cevap

1

Sen zaten bu anladım, ya da üzerinde başkasının sendeler değil durumda bu css özelliği

.exampleDiv { 
    float: right; 
} 
+0

iyi çalışmıyor. "ExampleDiv" öğesini sağa doğru küçültür ve her bir öğeyi farklı bir satıra yerleştirir. – itaied

+0

jsfiddle oluşturabilirsiniz – RAP

9

tarafından sağa şamandıra div bir div içinde ve daha da elemanlarını koyabilirsiniz. Yapmanız gereken tek şey, gerçek Nav bileşenine pullRight desteğini eklemektir. Sonuç solda bir Marka Logosu olmalı ve navigasyon sağa doğru çekilmelidir.

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