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

html css twitter-bootstrap Jack Frost
la source

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>
Andres Ilich
la source
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.

Milo van Loon
la source
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

Joel Wigton
la source