Twitter Bootstrap: Text in der Navigationsleiste

109

Laut der Twitter-Bootstrap- Dokumentation sollte ich in der Lage sein, "Textzeichenfolgen in ein <p>Tag zu wickeln, um die richtige Führung und Farbe zu erhalten". Wenn ich das mache, navbarerbt auf keiner Ebene darunter einfach eine der navbarKlassen. Wenn Sie die Zeichenfolge in <a>Tags einschließen, wird sie gerendert, sie sollte jedoch kein Anker sein.

Die Zeichenfolge, die ich zu rendern versuche, ist "Logged in as ... ".

html css twitter-bootstrap Jack Frost
quelle

Antworten:

237

Sie müssen eine Klasse zusammen mit Ihrem pTag in Ihre Navigationsleiste einfügen, wie folgt:

<p class="navbar-text">Logged in as</p>
Andres Ilich
quelle
2
@capncaveman die Twitter-Leute haben das nicht seltsam genug aufgenommen, aber Sie können es auf ihren Seitenbeispielen sehen.
Andres Ilich
35
Für das, was es wert ist, musste ich verwenden <p class="nav navbar-text">, um die richtige Formatierung zu erhalten.
eaj
Dank dafür! Zu Ihrer Information @eaj w / 3.3.6 Ich brauchte nicht .nav. Frage: Gibt es eine Standard-Bootstrap-Klasse, die die Auswahl des <p> -Textes deaktiviert?
Matthew Cornell
1
@MatthewCornell keine, die mir bekannt ist, aber Sie können sie "vortäuschen", indem Sie die ::selectionFarbe auf die des Hintergrunds abstimmen und die cursorEigenschaft beim Hover auf die Standardeinstellung zurücksetzen cursor: default;.
Andres Ilich
4

Dies wurde in Problem 2799 behoben .

Maulkorb
quelle
2

Ich musste hinzufügen, <span class="navbar-text">damit das Format mit den Ankertags übereinstimmt.

Milo van Loon
quelle
0

Keine dieser Antworten oder Kommentare funktionierte für mich (die letzte war 6+ Jahre alt), aber was für mich funktionierte, war die folgende:

  1. Ich musste das <span>Tag verwenden, nicht<p>
  2. Ich musste die "nav-item"Klasse in mein Listenelement selbst aufnehmen

Mein endgültiger Arbeitscode sieht folgendermaßen aus:

<li class="nav-item"><span class="navbar-text"><h5>{{first_name}}</h5></span></li>

Nehmen Sie mein Wort dafür, aber das Wort "Sally" unten ändert sich nicht in einen Hyperlink, wenn Sie den Mauszeiger darüber halten.

Geben Sie hier die Bildbeschreibung ein

Joel Wigton
quelle