Question

我正在测试bootstrap导航栏以及我对样式的了解不多。单击图标时，图像边界外会出现虚线框，如下所示：

我知道这与页面样式有关，但不知道如何解决。以下是我正在使用的确切代码：

<!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>

Answer 1

尝试在css文件中添加此规则

a {
   outline: none;
}

来源：css tricks

Answer 2

这个轮子是＆＃34;链接＆＃34;的标准浏览器。要解决您有两个选择 - 将其包含在您的标记中

a: active {
outline: none;
}

包含与图像高度相同的高度

.navbar-brand { 身高：60px; }

帮助了？

Answer 3

第一个发布的答案可以解决问题，但它也会影响页面上的每个锚标记，这看起来有点矫枉过正。

我建议改为：

.navbar .navbar-brand:focus {
    outline: none;
}

Bootstrap NavBar ccs3

3 个答案: