Twitter Bootstrap: Texto na barra de navegação

109

De acordo com a documentação de bootstrap do Twitter , devo ser capaz de "embrulhar cadeias de texto em uma <p>tag para obter orientação e cor adequadas." Quando eu faço isso, em qualquer nível abaixo navbardele simplesmente não herda nenhuma das navbarclasses. Envolver a string em <a>tags a renderiza, mas não deve ser uma âncora.

A string que estou tentando renderizar é "Logged in as ... ".

html css twitter-bootstrap Jack Frost
fonte

Respostas:

237

Você deve incluir uma classe junto com sua ptag dentro de sua barra de navegação, assim:

<p class="navbar-text">Logged in as</p>
Andres Ilich
fonte
2
@capncaveman o pessoal do Twitter não incluiu isso estranho o suficiente, mas você pode ver em seus exemplos de página.
Andres Ilich
35
Para valer a pena, eu tive que usar <p class="nav navbar-text">para obter a formatação correta.
2013
Obrigado por isso! Para sua informação, @eaj w / 3.3.6, eu não precisava de .nav. Pergunta: Existe uma classe Bootstrap padrão que desabilita a seleção do texto <p>?
Matthew Cornell
1
@MatthewCornell nenhum que eu conheça, mas você pode "fingir" definindo o estilo da ::selectioncor do plano de fundo e redefinindo a cursorpropriedade para o padrão ao passar o mouse, assim cursor: default;.
Andres Ilich
4

Isso foi corrigido no problema 2799 .

muzzamo
fonte
2

Tive que adicionar <span class="navbar-text">para que o formato ficasse nivelado com as tags âncora.

Milo van Loon
fonte
0

Nenhuma dessas respostas ou comentários funcionou para mim (o último tinha 6+ anos), mas o que funcionou para mim foi o seguinte:

  1. Tive que usar a <span>tag, não<p>
  2. Tive que incluir a "nav-item"classe no próprio elemento da minha lista

Meu código de trabalho final é parecido com este:

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

Acredite no que eu digo, mas a palavra "Sally" abaixo não muda para hiperlink quando o cursor do mouse é passado.

insira a descrição da imagem aqui

Joel Wigton
fonte