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 ... ".

Odpowiedzi:


237

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

<p class="navbar-text">Logged in as</p> 

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


2

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


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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.