我有以下代码:
.navbar.navbar-inverse .navbar-brand {
color: #fff;
}
.navbar.navbar-inverse .navbar-nav > li > a {
color: #fff;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">About</a>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Help</a>
</li>
<li><a href="#">Contact/a>
</li>
</ul>
</li>
<li><a href="#">Page 2</a>
</li>
<li><a href="#">Page 3</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Right Aligned Navbar</h3>
<p>some text.</p>
</div>
</body>
</html>现在，如果您在 Firefox 中执行上述代码并单击关于。您会看到类似这样的内容:
如何去掉白色圆圈？ 在 Safari 或 Chrome 上没有问题。
最佳答案
这是由默认的 Bootstrap CSS 规则引起的:
a:focus {
outline: thin dotted;
outline-offset: -2px;
}
您需要将焦点设置为outline: 0。如果您想专门在导航栏元素上删除它，可以使用代码片段中的代码。
否则，请使用 a:focus { Outline: 0 none; 覆盖所有链接。 } 检查自定义 CSS 优先级顺序是否较高，即放置在 Bootstrap 文件之后。
.navbar.navbar-inverse .navbar-brand {
color: #fff;
}
.navbar.navbar-inverse .navbar-nav > li > a {
color: #fff;
}
/* Added code */
.navbar-inverse .navbar-nav > .active > a:focus {
outline: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">About</a>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Help</a>
</li>
<li><a href="#">Contact/a>
</li>
</ul>
</li>
<li><a href="#">Page 2</a>
</li>
<li><a href="#">Page 3</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Right Aligned Navbar</h3>
<p>some text.</p>
</div>
</body>
</html>关于javascript - 如何在 Bootstrap 导航栏上的 Firefox 中单击时删除白色圆圈框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32780000/