Fügen Sie die Zurück-Taste in der Navbar

Ich versuche zum erstellen einer Navigationsleiste, erscheint in meiner top meiner app. Ich möchte die navbar so Aussehen:

+--------------------------------------------------------+
|                                                        |
| <-  Status                                             |
|                                                        |
+--------------------------------------------------------+

In einem gescheiterten Versuch zu tun, die habe ich erstellen Sie die folgende Navigationsleiste, die gesehen werden können, in diesem bootply.

<nav class="navbar">
  <div class="container-fluid">
    <div class="navbar-header navbar-default">
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#menu">
        <span class="sr-only">Toggle navigation</span>
      </button>
      <div>
        <a class="btn btn-link btn-xs" href="/home"><i class="fa fa-arrow-circle-o-left" style="font-size: 2.5rem;"></i></a>
        <div class="navbar-brand">Hello</div>
      </div>
    </div>
  </div>           
</nav>

Wenn Sie besuchen Sie die Bootply, können Sie sehen, dass der Pfeil erscheint rechts neben dem Titel statt der linken. Ich habe keine Ahnung, was passiert ist. Plus, Sie die zurück-Taste ist nicht vertikal zentriert, wie der text. Warum ist der zurück-button erscheint nach dem Titel stattdessen vor?

InformationsquelleAutor Zach Templeton | 2016-04-05

  1. 1

    Kann ich dir zwei Möglichkeiten dazu:

    Eins mit padding und float, eine andere mit flex.

    Bootply : http://www.bootply.com/23Knh8HEVE

    HTML

    <nav class="navbar">
  <div class="container-fluid">
    <div class="navbar-header navbar-default">
      <button class="navbar-toggle collapsed" type="button" data-target="#menu" data-toggle="collapse">
        <span class="sr-only">Toggle navigation</span>
      </button>
      <div>
        <a class="mybtn btn btn-link btn-xs" href="/home"><i class="fa fa-arrow-circle-o-left" style="font-size:2.5rem;"></i></a>
        <div class="navbar-brand">Hello</div>
      </div>
    </div>
  </div>           
</nav>

<nav class="navbar">
  <div class="container-fluid">
    <div class=" navbar-header navbar-default">
      <button class="navbar-toggle collapsed" type="button" data-target="#menu" data-toggle="collapse">
        <span class="sr-only">Toggle navigation</span>
      </button>
      <div class="mycontainer">
        <a class="mybtn2 btn btn-link btn-xs" href="/home"><i class="fa fa-arrow-circle-o-left" style="font-size:2.5rem;"></i></a>
        <div class="navbar-brand">Hello</div>
      </div>
    </div>
  </div>           
</nav>

    CSS

    .mybtn{float:left;padding:15px;display:inline-block;}

.mycontainer{display:flex;align-items:center;}

    PS:
    Ihre Schaltfläche ist rechts, weil die Marke schwimmt auf der linken Seite...

    InformationsquelleAutor Pimento Web

Schreibe einen Kommentar