使用常规 css 移除 Bootstrap 5 navigation-toggler 上的边框

Question

我想删除移动 'hamburger' 菜单上的浅灰色边框。我正在使用 font-awesome 和 Bootstrap 5（通过 CDN 干旱）来创建它，但似乎无法删除圆角边框。

html

    <nav class="navbar navbar-expand-lg navbar-light" role="navigation">
    <div class="container">
    
        <a class="navbar-brand" href="#">Navbar</a>
        <button
            class="navbar-toggler" 
            type="button" 
            data-bs-toggle="collapse" 
            data-bs-target="#navbarSupportedContent" 
            aria-controls="navbarSupportedContent" 
            aria-expanded="false"
            aria-label="Toggle navigation">
            <i class="fas fa-bars"></i>
        </button>

     ...

css

.navbar-toggler {
  &:focus {
    outline: none;
  }
}

除显示边框外一切正常：JSfiddle link 此处：

https://jsfiddle.net/r3q1kLcz/ enter image description here

Answer 1

您可以通过以下方式从 CSS 更改：

.navbar-light .navbar-toggler {
    border-color: transparent !important;
}

使用常规 css 移除 Bootstrap 5 navigation-toggler 上的边框

Remove Border on Bootstrap 5 navigation-toggler using regular css

css

menu

bootstrap-5