it-swarm.com.de

Twitter Bootstrap: Wie kann man die .btn-Klasse in einer Navigationsleiste korrekt verwenden?

Ich verwende eine Navigationsleiste für die Standardnavigation und möchte eine Schaltfläche für Anmelden und Registrieren hinzufügen.

Ich verwende ein a -Tag mit dem btn btn-large btn-success Klassen und standardmäßig kann die Navigationsleiste keine verschachtelten btns verwenden.

Das Ergebnis ist ungefähr so:

default without hover

Und wenn man darüber schwebt, sieht es so aus:

hovered

Meine Frage ist im Grunde: Mache ich das falsch? Fehlt mir etwas?

Ich dachte, ich würde fragen, bevor ich CSS-Klassen für .btn neu definiere. innerhalb einer navbar.

Vielen Dank.

61
Mario Zigliotto

Die Navigationsleiste nimmt problemlos Schaltflächen auf - ich habe problemlos Schaltflächen in der Navigationsleiste und konnte sie dem Beispiel für eine statische Navigationsleiste auf der Seite Bootstrap= hinzufügen :

Buttons added to the navbar.

Der HTML-Code sollte folgendermaßen angelegt sein:

<div class="navbar navbar-fixed-top active">
  <div class="navbar-inner">
    <div class="container" style="width: auto;">
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          ... nav links ...
        </ul>
        <form class="navbar-search pull-left" action="">
          ... search box stuff
        </form>
        <a class="btn btn-success">Sign in</a>
        <a class="btn btn-primary">Sign up</a>
      </div>
    </div>
  </div>
</div>

Wenn Sie das reaktionsschnelle Layout nicht verwenden, um die Navigationsleiste auf kleineren Bildschirmen auszublenden, platzieren Sie Ihre Schaltflächenlinks in <div class="container"> Eine Ebene höher.

Wenn Sie das Problem immer noch nicht finden, verwenden Sie Chrome's Dev Tools , um festzustellen, welches CSS auf die Schaltflächen angewendet wird, die nicht vorhanden sein sollten.

63
Jared Harley

Wie bereits erwähnt hier , funktioniert das Umbrechen des Links mit einem div:

<div><a class='btn' href='#'>Link</a></div>
31
Ashit Vora

Hier ist eine modifizierte Version von Jared Harleys Antwort. Dies ist, was ich letztendlich verwendet habe und es unterstützt ein Dropdown in der Navigationsleiste.

<div class="navbar navbar-fixed-top active">
  <div class="navbar-inner">
    <div class="container" style="width: auto;">
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          ... nav links ...
        </ul>
        <form class="navbar-search pull-left" action="">
          ... search box stuff
        </form>
        <a class="btn btn-success">Sign in</a>
        <a class="btn btn-primary">Sign up</a>
      </div>
      <div class="pull-right">
        <ul class="nav">
          <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">
              Dropdown
              <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">item</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">another item</a>
              </li>
            </ul>
          </li>
          <li class="divider-vertical"></li>
        </ul>
        <a class="btn btn-primary" href="#">Primary</a>
        <a class="btn btn-success" href="#">Success</a>
      </div>
    </div>
  </div>
</div>
6
Mario Zigliotto
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">Brand name</a>
            <ul class="nav">
                <li class="active"><a href="#">Main</a></li>
                <li><a href="#about">Next one</a></li>
            </ul>


            <div class="btn-group pull-right">
                <a class="btn btn-small dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i> Trololo</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>


        </div>
    </div>
</div>
1
24inwork

Ich hatte das gleiche Problem beim Einfügen der .btn in die Navigationsleiste, und als ich über dem Bildschirm schwebte, "schnitt" sie die Hälfte der Schaltfläche bg ab. Ich löste es auf diese Weise, indem ich .nav> li> a.btn: hover erneut in main.css deklarierte -> Die benutzerdefinierte Stildatei der App, die in head nach bootstrap.css platziert wurde, hat auf diese Weise funktioniert. Wenn Sie ein Element in einem Firebug- oder einem anderen Dev-Tool untersuchen und versuchen, es zu verbergen, werden Sie feststellen, dass der .btn-Schwebestil von neu geschrieben wird Navi-Hover-Stil, der nach den Schaltflächen in der Datei bootstrap.css platziert wird ...

0
bblokar