Wie geht man mit der rechten Maustaste rechtfertigen bootstrap-Pillen mit css

Habe ich einen header mit drei Abschnitten, Links, Mitte und rechts. Ich kann nicht scheinen zu kommen mit der richtigen css, um die Spalte auf der rechten Seite (mit 'E-Mail-Geschichte' und 'zurück zur Liste') schweben, auf der rechten Seite der Spalte. Wie kann mir jemand sagen wie das geht? Jede Hilfe ist willkommen.

<div class="col-sm-5" style="text-align:left">
    <button type="submit" class="btn btn-primary btn-lg navbar-btn">Save Contact</button>
</div>
<div class="col-sm-2" style="text-align:center">
   <h2 class="branding">Edit Contact</h2>
</div>
<div class="col-sm-5">
   <ul class="nav nav-pills">
      <li class="active"><a href="/GoHistory">Email History</a></li>
      <li class="active"><a href="/email_marketing/contact-list">Back To List</a></li>
   </ul>
</div>

InformationsquelleAutor user2789697 | 2014-04-30

  1. 12

    HINWEIS: Die Antwort unten gilt für Bootstrap 2 und 3; in der Bootstrap-4-äquivalent-Klasse float-right, und viewport-spezifische float-Klassen sind ebenfalls erhältlich.

    Die einfachste option ist, um die Klasse pull-right zu den ul element. Dies wird schweben die Pillen auf der rechten Seite.

    Nebenbei bemerkt: Sie kann ersetzen diese inline-Stile werden mit der helper-Klassen text-left (das ist oft redundant) und text-center.

    Hier ein bootply Beispiel: http://www.bootply.com/134139

    Dies wird dazu führen, dass einige float-Probleme, aber, und in meiner Erfahrung .clearfix nicht helfen, es zu erhalten, gelöscht.
    Auf der einen Seite, ich fühle mich so dumm, wenn Sie das Update ist so einfach. Auf der anderen Seite ist es schön, wenn die Lösung ist soooo einfach. Danke.
    Nur eine Warnung, wenn Sie nicht mit Spalten und nur eine schlichte nav, Sie müssen meine Lösung weiter unten 🙂 Und ja, froh war es einfach 😛
    Die pull-right utility wurde entfernt zugunsten der float-right, so die Antwort, die aktualisiert werden soll.
    Danke für den Hinweis; ich habe aktualisiert die Antwort auf beide-die alte & neue Versionen.

    InformationsquelleAutor nthall

  2. 2

    Müssen überschreiben einige Bootstrap-styling...

    Müssen Sie entfernen, der Schwimmer auf die Elemente der Liste und legen Sie es auf display:inline-block. Dann für die unordered-list-element, und fügen text-align:left.

    Hier die CSS:

    ul.nav.nav-pills {
    text-align: right;
}

.nav-pills>li {
    float: none;
    display: inline-block;
}

    Genießen!

    Diese Methode ist am besten für die richtige Ausrichtung der bootstrap-nav-tabs. Hier ist ein Beispiel für die bootstrap-nav-tabs mit der obigen CSS.jsbin.com/yuxiyi/edit?html,css,Ausgang

    InformationsquelleAutor

  3. -1

    Versuchen, eine style="float:left;" auf die einzelnen div. Und ein <ul class="nav nav-pills" style="float:right;">. Danach deaktivieren Sie das float.

    InformationsquelleAutor Fven

Schreibe einen Kommentar