使用Bootstrap5时点击导航栏折叠按钮出现默认边框该如何移除

你看到的点击后出现的轮廓不是border属性控制的样式，是Bootstrap 5给.navbar-toggler的:focus伪类默认设置的box-shadow属性，加上你原有CSS中.navbar-toggler: active中间多了空格，导致伪类选择器失效，所以规则没有生效。

如果需要在开发者工具里查看该默认样式，选中导航栏折叠按钮元素后，在样式面板勾选:hov下的:focus选项，就能触发聚焦态看到对应的默认规则。

直接替换你style.css中的导航栏相关代码即可解决问题：

/* Navigation Bar */
.navbar-toggler{
    border: 0;
    background-color: transparent;
    color: rgb(0, 0, 0);
}

/* 覆盖聚焦、激活状态的默认边框和阴影 */
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
    border: 0;
}

注意：你的自定义CSS文件必须在Bootstrap原生CSS之后引入，才能覆盖默认规则，你当前的引入顺序是符合要求的，替换后直接生效。

内容的提问来源于stack exchange，提问作者Priyanka。