Twitter Bootstrap: texte dans la barre de navigation


109

Selon la documentation de bootstrap de Twitter , je devrais être capable de "Envelopper des chaînes de texte dans une <p>balise pour un interligne et une couleur appropriés". Quand je fais cela, à n'importe quel niveau en dessous, navbaril n'hérite simplement d'aucune des navbarclasses. L'emballage de la chaîne dans des <a>balises la rend mais cela ne devrait pas être une ancre.

La chaîne que j'essaie de rendre est "Logged in as ... ".

Réponses:


237

Vous devez inclure une classe avec votre pbalise à l'intérieur de votre barre de navigation, comme ceci:

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

2
@capncaveman les gens de Twitter n'ont pas inclus cela assez bizarre, mais vous pouvez le voir sur leurs exemples de page.
Andres Ilich

35
Pour ce que ça vaut, j'ai dû l'utiliser <p class="nav navbar-text">pour obtenir un formatage correct.
eaj

Merci pour ça! FYI @eaj w / 3.3.6 Je n'ai pas besoin de .nav. Question: Existe-t-il une classe Bootstrap standard qui désactive le texte <p> de la sélection?
Matthew Cornell du

1
@MatthewCornell aucun que je connaisse, mais vous pouvez le "simuler" en stylisant la ::selectioncouleur sur celle de l'arrière-plan et en réinitialisant la cursorpropriété par défaut au survol, comme ceci cursor: default;.
Andres Ilich du


2

J'ai dû ajouter <span class="navbar-text">pour que le format soit au niveau des balises d'ancrage.


0

Aucune de ces réponses ou commentaires n'a fonctionné pour moi (le dernier avait 6 ans et plus), mais ce qui a fonctionné pour moi était le suivant:

  1. J'ai dû utiliser le <span>tag, pas<p>
  2. J'ai dû inclure la "nav-item"classe dans mon élément de liste lui-même

Mon code de travail final ressemble à ceci:

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

Croyez-moi sur parole, mais le mot «Sally» ci-dessous ne se transforme pas en hyperlien lorsqu'il est survolé.

entrez la description de l'image ici

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.