Twitter Bootstrap: tekst na pasku nawigacyjnym

109

Zgodnie z dokumentacją bootstrapową na Twitterze , powinienem być w stanie „zawijać ciągi tekstu w <p>znaczniku, aby zapewnić właściwe prowadzenie i kolor”. Kiedy to robię, na żadnym niższym poziomie navbarpo prostu nie dziedziczy żadnej z navbarklas. Zawijanie ciągu w <a>znaczniki renderuje go, ale nie powinien być kotwicą.

Ciąg, który próbuję renderować, to "Logged in as ... ".

html css twitter-bootstrap Dziadek Mróz
źródło

Odpowiedzi:

237

Musisz dołączyć klasę wraz ze swoim ptagiem do paska nawigacyjnego, na przykład:

<p class="navbar-text">Logged in as</p>
Andres Ilich
źródło
2
@capncaveman, ludzie z Twittera, nie uwzględnili tego wystarczająco dziwnego, ale możesz to zobaczyć na przykładach ich stron.
Andres Ilich
35
Na ile to było warte, musiałem użyć, <p class="nav navbar-text">aby uzyskać prawidłowe formatowanie.
eaj
Dziękuję za to! FYI @eaj w / 3.3.6 Nie potrzebowałem .nav. Pytanie: Czy istnieje standardowa klasa Bootstrap, która wyłącza zaznaczanie tekstu <p>?
Matthew Cornell,
1
@MatthewCornell nie jestem tego świadomy, ale możesz to „udawać”, stylizując ::selectionkolor na kolor tła i resetując cursorwłaściwość do domyślnych po najechaniu kursorem cursor: default;.
Andres Ilich
4

Zostało to naprawione w numerze 2799 .

muzzamo
źródło
2

Musiałem dodać, <span class="navbar-text">aby format był wyrównany z tagami kotwicy.

Milo van Loon
źródło
0

Żadna z tych odpowiedzi ani komentarzy nie zadziałała dla mnie (ostatnia miała 6 lat i więcej), ale to, co zadziałało, było następujące:

  1. Musiałem użyć <span>tagu, nie<p>
  2. Musiałem dołączyć "nav-item"klasę do samego elementu listy

Mój ostatni działający kod wygląda następująco:

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

Wierz mi na słowo, ale słowo „Sally” poniżej nie zmienia się w hiperłącze po najechaniu kursorem.

wprowadź opis obrazu tutaj

Joel Wigton
źródło