Reagieren-Bootstrap ziehen der rechten Navigationsleiste

Ich bin mit react-bootstrap für das styling meiner website. Ich möchte hinzufügen Navbar wo alle Elemente sind auf der rechten Seite gespiegelt.

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

Das Ergebnis ist
Reagieren-Bootstrap ziehen der rechten Navigationsleiste

Aber was ich eigentlich wollen, dass es

[                                                           World Hello Brand ]

Versuchte ich mit pullRight auf die <Navbar aber es hat nicht funktioniert. Ich habe auch <html dir="rtl">, aber auch dies hat nicht geholfen. Wie kann ich es tun?

  • haben Sie versucht, indem pullRight zu Navbar.Header?
  • Ja, es Tat sich nichts.. ich habe versucht, indem pullRight um jedes element im oben stehenden code.
  • interessant. Dokumentation sagt, dass es angewendet werden soll, auf Nav Elemente.
  • können Sie aktualisieren Sie Ihren code in diesem fiddle jsfiddle.net/t9sf5u9n
  • Ich weiß nicht, wie Sie die Komponenten reagieren, da bin ich auch mit babel und webpack..
  • In meinem Fall, ich brauche, um Nav Stil. Prüfen Sie das Antwort.

InformationsquelleAutor itaied | 2015-12-04
  1. 11

    Falls Sie noch nicht dachte, dieses heraus, oder jemand stolpert über Sie. Alle sollten Sie tun müssen ist, fügen Sie die pullRight requisite, um die tatsächliche Nav Komponente. Das Ergebnis sollte ein Marken-Logo in der linken, und die navigation zog auf der rechten Seite.

    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>
)}
    • Ich habe versucht zu tun, aber meine entstehende Seite sieht aus wie dieser. Irgendeine Idee, warum das der Fall sein könnte? Ich bin mir ziemlich sicher, dass ich nicht irgendwelche CSS werden könnte, dass messing mit der position...
    • Sorry @pfincent , ich glaube, ich muss den code sehen, bzw. eine live-link auf der Seite.
    InformationsquelleAutor Ryan Ore
  2. 1

    Eigentlich, laut der Dokumentation von Bootstrap Reagieren pullRight sollte es tun. Aber ich war nicht in der Lage zu erkennen, es entweder. Fand ich eine funktionierende Lösung, die ich beschrieben hier.

    InformationsquelleAutor Dan
  3. 0

    Können Sie Ihre Elemente innerhalb eines div und float-div nach rechts durch diese css-Eigenschaft

    .exampleDiv {
   float: right;
 }
    • Es ist auch nicht gut funktionieren. Es schrumpft die exampleDiv auf der rechten Seite und legen Sie jedes element in einer anderen Zeile.
    • können Sie erstellen ein jsfiddle
    InformationsquelleAutor RAP
Schreibe einen Kommentar