使用 CSS 删除 Bootstrap 中导航栏切换器汉堡图标的边框颜色

问题描述 投票：0回答：11

我已经被困在这个问题上很长时间了。搜索并尝试了多种方法来删除单击 BS4 汉堡包图标时的边框颜色（在我的本地，它显示为黄色。在这个片段中，它是蓝色的）

有人可以帮忙解决这个问题吗？感谢您的帮助！

这是我的代码： 

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

html css bootstrap-4 navbar
11个回答
62
投票

这在 Bootstrap 4 中对我有用。

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

请注意：大纲的存在有一个重要原因，即可访问性！特别是对于不能使用鼠标或有视力障碍的人。请参阅 http://www.outlinenone.com/ 并考虑在切换器处于活动/聚焦状态时向其添加其他样式。

7
投票
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    border: none;
    box-shadow: none;
}
5
投票

单击 Bootstrap 导航栏图标的汉堡图标时更改或删除边框颜色。您需要进入 

bootstrap.min.css
文件并转到 
button:focus
类。在那里进行更改或完全删除 
outline
。像这样：

button:focus {

outline: 1px dotted;
outline: 5px auto -webkit-focusring-color;

}
5
投票

实际上对于 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">

5
投票

从 Bootstrap v5.1.3 开始，这对我有用：

.navbar-toggler {
  border: none;
  outline: none;

   &:focus,
   &:active,
   &-icon:focus {
     outline: none;
     box-shadow: none;
   }
}
3
投票

对于 Bootstrap v5.1.3：

.navbar-toggler:focus,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}
2
投票

BS5 的解决方案：

无需用额外的 CSS 类覆盖 BS。官方的方式是自定义Bootstrap本身。对于实际的 Bootstrap 5.2.3 有两种可能性：

(1) 如果 Bootstrap 是由 SASS 生成的，请将以下设置变量更改为以下值：

$navbar-toggler-padding-y:          0;
$navbar-toggler-padding-x:          0;
$navbar-toggler-font-size:          1.5rem;
$navbar-toggler-border-radius:      0;
$navbar-toggler-focus-width:        0;
$navbar-toggler-transition:         none;

$navbar-light-toggler-border-color: none;
$navbar-dark-toggler-border-color:  none;

有关如何通过 SASS 变量自定义框架的 Bootstrap 页面链接 https://getbootstrap.com/docs/5.2/customize/sass/

注意：在 BS4 中也可以通过 SASS 自定义 Bootstrap。但变量可能会有所不同。

(2) 如果您不使用 SASS 但使用静态 Bootstrap 文件，您可以通过自定义 BS-Setting-CSS-Variables 来自定义 Bootstrap：

创建一个 Bootstrap-CSS-Settings-File 并将其包含在静态 Bootstrap-CSS-File 之后到您的 HTML 页面中。在此处添加您要重新定义的变量。对于这种情况，您必须建议特殊元素类的变量：

.navbar {
  --bs-navbar-toggler-padding-y: 0;
  --bs-navbar-toggler-padding-x: 0;
  --bs-navbar-toggler-font-size: 1.5rem;
  --bs-navbar-toggler-border-color: none;
  --bs-navbar-toggler-border-radius: 0;
  --bs-navbar-toggler-focus-width: 0;
  --bs-navbar-toggler-transition: none;
  --bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.1);
}
.navbar-dark {
  --bs-navbar-toggler-border-color: none;
}

注意：BS5 中引入了在更高级别上通过 CSS 变量自定义 Bootstrap。变量在不同的子版本中发生了变化。显示的变量在 5.2.3 中工作

问题是关于BS4的。已添加 BS5 的解决方案，因为即使搜索有关 BS5，搜索引擎也会显示此答案。这是对原始问题的补充答案。

1
投票
.navbar-toggler {
    border:0px;
}

这对我有用

1
投票

试试这个！这对我有用。

.navbar-dark .navbar-toggler {
color: rgba(255, 255, 255, 0) !important;
border-color: rgba(255, 255, 255, 0) !important;
}
0
投票
button:focus {
    outline: none;
    outline: none -webkit-focus-ring-color;
}
0
投票

这是我带来的解决方案SCSS（Sass）：

.navbar-toggler {
    &:focus,
    &:active {
      outline: none;
      box-shadow: none;
    }
  }

  .navbar-toggler-icon {
    background-image: none;
    
    &:focus {
      outline: none;
      box-shadow: none;
    }
  }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.