Bootstrap 3.0-Schaltfläche in der Navigationsleiste

79

Ich habe jetzt Bootstrap 3.0 aktualisiert. Und "ein" Tag, das wie btn aussieht (mithilfe der Klasse .btn), ist auf der Navigationsleiste ruiniert.

<li>
   <a href="<?php echo BASE_PATH; ?>register.php" class="btn btn-primary btn-sm">
       <?php echo "<strong>" . _('Bayilik Başvurusu') . "</strong>"; ?>
   </a>
</li>

Aber es funktioniert nicht richtig. Bootstrap hat das System verändert, denke ich.

Cihan Küsmez
quelle
Sie sollten sich unbedingt den Abschnitt zur Migration von Bootstrap 2 bis 3 in der Dokumentation ansehen. Es werden alle Klassen aufgelistet, die geändert oder entfernt wurden, und was an ihrer Stelle verwendet werden soll. getbootstrap.com/getting-started/#migration
cjd82187

Antworten:

176

Wickeln Sie ein <p class="navbar-btn">um <a class="btn">:

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <ul class="nav navbar-nav">
            <li>
                <p class="navbar-btn">
                    <a href="#" class="btn btn-default">I'm a link button!</a>
                </p>
            </li>
        </ul>
    </div>
</nav>

JSFiddle: http://jsfiddle.net/lachlan/398kj/

Bildschirmfoto:
Bootstrap-Link-Schaltfläche in der Navigationsleiste

Lachlan Arthur
quelle
1
Danke, funktioniert gut und ich mag Ihre Lösung besser, da Sie immer noch <a>
pastullo
6
Seien Sie gewarnt: Die reduzierte Version sieht nicht gut aus. Andere Links sind Blöcke (dh die volle Breite kann angeklickt werden). Wenn Sie es verwenden btn-block, wird der Text zentral ausgerichtet, sodass er nicht mit anderen Links übereinstimmt.
Rybo111
46

Jetzt hat Bootstrap 3 folgende Schaltflächen in der Navigationsleiste:

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Es wird verwendet, navbar-btndamit es weiß, dass es sich in der Navigationsleiste befindet.

Wenn Sie möchten, dass es funktioniert, gehen Sie folgendermaßen vor:

<li>
    <form action="#">
        <button class="btn btn-default navbar-btn">Link</button>
    </form>
</li>

Auf diese Weise verhält es sich immer noch wie ein Ankertag. Ändern #Sie einfach den Wert, zu dem er tatsächlich gehen soll.

Also für diesen Fall:

<li>
    <form action="<?php echo BASE_PATH; ?>register.php">
        <button class="btn btn-default navbar-btn">Link</button>
    </form>
</li>
Albzi
quelle
1
wie wäre es mit ? <a type="button" class="btn btn-default navbar-btn"> Link </a> Bevor wir das tun können.
Cihan Küsmez
2
Leider ist dies der Fall, wenn der Pfad, auf den es zeigt, /appdie Ergebnis-URL ist /app?(beachten Sie das zusätzliche Fragezeichen).
Hakunin
24

Mit Bootstrap 3 ist es weiterhin möglich, einen <a>Link als Schaltfläche zu rendern, aber Sie müssen ihn in eine einfügen <form>. Außerdem <a>sollte die navbar-btnKlasse enthalten sein.

<li>
  <form>
    <a href="#" class="btn btn-primary btn-sm navbar-btn">
      register
    </a>
  </form>
</li>
Megar
quelle
15
Danke für den Tipp. Eigentlich habe ich auch <div>Werke gefunden , <form>die nicht semantisch sind. Der Schlüssel ist nicht, aein direktes Kind daraus zu machen <li>.
Billy Chan
1
Ist der Schwebeflug dabei durcheinander? Der Hintergrund für die Schaltfläche wird für mich transparent.
RichC
1
Die <div> -Lösung funktioniert bei mir. Es ist eine Schande, dass dies nativ im Framework unterstützt wird. Ich habe auch viele Diskussionen über Github gesehen und glaube nicht, dass sie Pläne haben, Links-Buttons nativ funktionieren zu lassen, was mir eine schlechte Wahl erscheint.
SirRawlins
21

Das Problem ist, dass der Selektor zum Stylen eines Ankers in einer Navigationsleiste lautet: Dies .nav > li > abedeutet, dass er eine höhere Priorität hat als ein .navbar-btn.

Sie können das Problem beheben, indem Sie es einfach wie eine Spanne in ein anderes Tag einwickeln. Ich denke nicht, dass Sie ein Formular-Tag verwenden sollten, wie andere vorschlagen, da es überhaupt kein Formular ist.

Intellix
quelle
2
definitiv die beste Antwort.
Typoneerror
0

http://learnangular2.com/events/

EREIGNISOBJEKT

Übergeben Sie zum Erfassen des Ereignisobjekts $ event als Parameter im Ereignisrückruf aus der Vorlage:

<button (click)="clicked($event)"></button>

Dies ist eine einfache Möglichkeit, das Ereignis zu ändern, z. B. den Aufruf von prepareDefault:

@Component(...)
class MyComponent {
  clicked(event) {
    event.preventDefault();
  }
}
victorhazbun
quelle
Das ... ähm. Was?
Adowrath