Twitter Bootstrap: testo nella barra di navigazione


109

Secondo la documentazione del bootstrap di Twitter , dovrei essere in grado di "racchiudere stringhe di testo in un <p>tag per una corretta interlinea e colore". Quando lo faccio, a qualsiasi livello sottostante navbarsemplicemente non eredita nessuna delle navbarclassi. Avvolgere la stringa nei <a>tag la rende ma non dovrebbe essere un'ancora.

La stringa che sto cercando di rendere è "Logged in as ... ".

Risposte:


237

Devi includere una classe insieme al tuo ptag all'interno della tua barra di navigazione, in questo modo:

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

2
@capncaveman la gente di Twitter non l'ha inclusa abbastanza strana, ma puoi vederla nelle loro pagine di esempio.
Andres Ilich

35
Per quello che vale, ho dovuto usare <p class="nav navbar-text">per ottenere una formattazione corretta.
eaj

Grazie per quello! Cordiali saluti @eaj w / 3.3.6 non avevo bisogno di .nav. Domanda: esiste una classe Bootstrap standard che disabilita il testo <p> dalla selezione?
Matthew Cornell

1
@ MatthewCornell nessuno di cui sono a conoscenza, ma puoi "fingere" abbinando il ::selectioncolore a quello dello sfondo e ripristinando l' cursorimpostazione predefinita della proprietà al passaggio del mouse, in questo modo cursor: default;.
Andres Ilich


2

Ho dovuto aggiungere <span class="navbar-text">per il formato a livello con i tag di ancoraggio.


0

Nessuna di queste risposte o commenti ha funzionato per me (l'ultimo aveva più di 6 anni), ma ciò che ha funzionato per me è stato il seguente:

  1. Ho dovuto usare il <span>tag, no<p>
  2. Ho dovuto includere la "nav-item"classe nel mio elemento dell'elenco stesso

Il mio codice di lavoro finale è simile a questo:

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

Credimi sulla parola, ma la parola "Sally" di seguito non cambia in collegamento ipertestuale quando si passa con il mouse.

inserisci qui la descrizione dell'immagine

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.