使用 CSS 在 Bootstrap 中删除导航栏切换器汉堡图标的边框颜色
Posted
技术标签:
【中文标题】使用 CSS 在 Bootstrap 中删除导航栏切换器汉堡图标的边框颜色【英文标题】：Remove border color for navbar-toggler Hamburger icon in Bootstrap using CSS 【发布时间】：2018-11-13 01:57:17 【问题描述】：我已经被困了很长时间了。搜索并尝试了多种方法来删除 BS4 汉堡图标单击时的边框颜色（在我的本地，它显示为黄色。在这个 sn-p 中，它是蓝色的）
谁能帮忙解决这个问题？感谢您的帮助！
这是我的代码：
<nav class="navbar sticky-top navbar-expand-lg" style="background-color: #eeeeee">
<button class="navbar-toggler ml-auto hidden-sm-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span><i class="fa fa-navicon"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link active" routerLink="/about" routerLinkActive="active">
<span>About</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/projects" routerLinkActive="active">
<span>Projects</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/contact" routerLinkActive="active">
<span>Contact</span>
</a>
</li>
</ul>
</div>
</nav>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">【问题讨论】：
【参考方案1】：单击 Bootstrap 导航栏图标的汉堡图标时更改或删除边框颜色。您需要进入bootstrap.min.css 文件并进入button:focus 类。在此处更改或完全删除outline。像这样：
button:focus
outline: 1px dotted;
outline: 5px auto -webkit-focusring-color;
【讨论】：
很高兴它有帮助。但是，我没有在bootstrap.min.css 中更改它，而是将该样式应用于特定的切换器图标，如下所示：button.navbar-toggler:focus outline: 1px none; 有效！【参考方案2】：
实际上对于 Bootstrap，他们不使用 border 作为导航 focus 他们使用 outline
你可以去掉它的宽度：
button.navbar-toggler.ml-auto.hidden-sm-up.float-xs-right:focus
outline: none!important;
希望得到帮助 :>
button.navbar-toggler.ml-auto.hidden-sm-up.float-xs-right:focus
outline: none!important;
<nav class="navbar sticky-top navbar-expand-lg" style="background-color: #eeeeee">
<button class="navbar-toggler ml-auto hidden-sm-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span><i class="fa fa-navicon"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link active" routerLink="/about" routerLinkActive="active">
<span>About</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/projects" routerLinkActive="active">
<span>Projects</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/contact" routerLinkActive="active">
<span>Contact</span>
</a>
</li>
</ul>
</div>
</nav>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">【讨论】：
【参考方案3】：这在 Bootstrap 4 中对我有用。
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus
outline: none;
box-shadow: none;
请注意：提供大纲有一个重要原因，即可访问性！特别是对于不能使用鼠标或有视力障碍的人。请参阅http://www.outlinenone.com/ 并考虑在切换器处于活动/聚焦状态时添加一些其他样式。
【讨论】：
它基本上由浏览器默认的轮廓样式呈现：focus outline: -webkit-focus-ring-color auto 5px;上面的解决方案有效！ 记得我给你买啤酒【参考方案4】：.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus
outline: none;
border: none;
box-shadow: none;
【讨论】：
【参考方案5】：.navbar-toggler
border:0px;
这对我有用
【讨论】：
【参考方案6】：button:focus
outline: none;
outline: none -webkit-focus-ring-color;
【讨论】：
【参考方案7】：对于 Bootstrap v5.1.3：
.navbar-toggler:focus,
.navbar-toggler-icon:focus
outline: none;
box-shadow: none;
【讨论】：
【参考方案8】：试试这个！它对我有用。
.navbar-dark .navbar-toggler
color: rgba(255, 255, 255, 0) !important;
border-color: rgba(255, 255, 255, 0) !important;
【讨论】：
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。【参考方案9】：从 Bootstrap v5.1.3 开始，这对我有用：
.navbar-toggler
border: none;
outline: none;
&:focus,
&:active,
&-icon:focus
outline: none;
box-shadow: none;
【讨论】：
以上是关于使用 CSS 在 Bootstrap 中删除导航栏切换器汉堡图标的边框颜色的主要内容，如果未能解决你的问题，请参考以下文章