0

Estou testando o bootstrap navbar e, como não conheço muito sobre estilos, não sei como resolver. Quando clico no ícone um quadro pontilhado aparece fora do contorno da imagem conforme abaixo:

inserir a descrição da imagem aqui

Sei que isso está relacionado ao estilo da página, mas não sei como resolver. Abaixo segue o código da página que estou utilizando:

<!DOCTYPE html>
<html>
  <head> 
  <link href="css/bootstrap.css" rel="stylesheet">
  <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 </head>
 <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
 <div class="container">
  <div class="navbar-header">
   <a class="navbar-brand" href="#">
    <img alt="Brand" src="lib/img/mig.png">
   </a>
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
   </button>
   <h1 class="navbar-header" href="#">Home</h1>
  </div>
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
   <br>
    <ul class="nav nav-pills navbar-right">
     <li class="active"> 
       <a href="#">Home</a>
     </li>
     <li class=""> 
       <a href="#">About</a>
     </li>
     <li class=""> 
       <a href="#">Contact</a>
     </li>
     <li class=""> 
       <a href="#">Maps</a>
     </li>       
    </ul>
   </br>
  </div>
   <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
 </nav>
 <body> 
 </body>
</html>
2
  • O ícone seria o "mig.png"? fica difícl verificar o que está acontecendo, sem poder dar uma olhada no css. posta o bootstrap.css e o font-awesome.min.css que você está utilizando (qual versão) para eu poder dar uma olhada. se possível crie um projeto no jsfidlle. 22/02/2016 às 17:52
  • rapaz, você tem que ajustar o padding ali pra imagem ficar centralizada no navbar, se não me engano na classe .navbar-brand
    – Leandro RR
    22/03/2016 às 13:11

1 Resposta 1

1

Essa propriedade se chama outline, você pode remove-lo assim: outline: none:

a:active, a:focus { 
    outline: none; 
    ie-dummy: expression(this.hideFocus=true);
}

Esta forma é a mais compativel que achei, funciona do IE9 Acima.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .