Twitter Bootstrap: texto en la barra de navegación

109

De acuerdo con la documentación de arranque de Twitter , debería poder "Ajustar cadenas de texto en una <p>etiqueta para que el color y el interlineado sean los adecuados". Cuando hago esto, en cualquier nivel navbar, simplemente no hereda ninguna de las navbarclases. Envolver la cadena en <a>etiquetas la representa, pero no debería ser un ancla.

La cadena que estoy tratando de representar es "Logged in as ... ".

html css twitter-bootstrap Jack Frost
fuente

Respuestas:

237

Tienes que incluir una clase junto con tu petiqueta dentro de tu barra de navegación, así:

<p class="navbar-text">Logged in as</p>
Andrés Ilich
fuente
2
@capncaveman, la gente de Twitter no incluyó eso lo suficientemente extraño, pero puedes verlo en sus ejemplos de páginas.
Andres Ilich
35
Por lo que vale, tuve que usar <p class="nav navbar-text">para obtener el formato correcto.
eaj
¡Gracias por eso! FYI @eaj w / 3.3.6 No necesitaba .nav. Pregunta: ¿Existe una clase Bootstrap estándar que deshabilite el texto <p> de la selección?
Matthew Cornell
1
@MatthewCornell ninguno que yo sepa, pero puede "falsificarlo" aplicando un estilo al ::selectioncolor del fondo y restableciendo la cursorpropiedad a la predeterminada al pasar el mouse, así cursor: default;.
Andres Ilich
2

Tuve que agregar <span class="navbar-text">para que el formato se nivelara con las etiquetas de anclaje.

Milo van Loon
fuente
0

Ninguna de estas respuestas o comentarios funcionó para mí (el último tenía más de 6 años), pero lo que funcionó para mí fue lo siguiente:

  1. Tuve que usar la <span>etiqueta, no<p>
  2. Tuve que incluir la "nav-item"clase en el elemento de mi lista.

Mi código de trabajo final se ve así:

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

Créame, pero la palabra "Sally" a continuación no cambia a hipervínculo cuando se desplaza.

ingrese la descripción de la imagen aquí

Joel Wigton
fuente