使用常规 CSS 删除 Bootstrap 5 导航切换器上的边框

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

我希望删除移动“汉堡”菜单上的浅灰色边框。我正在使用 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 链接在这里：

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

css menu bootstrap-5
5个回答
4
投票

完全没有国界。

.navbar-toggler:focus {
    /*Below line will remove the border from the icon
    I have used bootstrap icon here */
    /* This will only remove the shadow effect */
    /* Border is still there */
    /* if you don't want any border then set the property equals to zero */
    border: 0 !important;
    box-shadow: none !important;
  
    /* This will remove the rounded corner(radious-border)
    and give square border */
    /* border-radius: 0 !important; */    
}

.navbar-toggler {
    /* This will completely remove border from the icon */
    /* If you need border for the icon then comment this code */
     border: 0 !important;

    /* if you want to check the border please uncomment below code */
    /* border-color: yellow !important; */
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous">
  </script>

</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark mynav">
    <a class="navbar-brand" href=""> Logo</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon nti"></span>
        </button>

    <div class="collapse navbar-collapse" id="navbarNav">

      <ul class="navbar-nav ms-auto">
        <li class="navbar-item">
          <a class="nav-link" href="">Contact</a>
        </li>
        <li>
          <a class="nav-link" href="">Pricing</a>
        </li>
        <li>
          <a class="nav-link" href="">Download</a>
        </li>
      </ul>
    </div>
  </nav>
</body>

</html>

2
投票

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

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

要删除切换图标的阴影效果：

.navbar-toggler:focus {
    /*Below line will remove the border from the icon
    I have used bootstrap icon here */
    /* This will only remove the shadow effect */
    /* Border is still there */
    /* if you don't want any border then set the property equals to zero */
    box-shadow: none !important;
  
    /* This will remove the rounded corner(radious-border)
    and give square border */
    /* border-radius: 0 !important; */    
}

.navbar-toggler {
    /* This will completely remove border from the icon */
    /* If you need border for the icon then comment this code */
    /* border: 0 !important; */

    /* if you want to check the border please uncomment below code */
    /* border-color: yellow !important; */
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous">
  </script>

</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark mynav">
    <a class="navbar-brand" href=""> Logo</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon nti"></span>
        </button>

    <div class="collapse navbar-collapse" id="navbarNav">

      <ul class="navbar-nav ms-auto">
        <li class="navbar-item">
          <a class="nav-link" href="">Contact</a>
        </li>
        <li>
          <a class="nav-link" href="">Pricing</a>
        </li>
        <li>
          <a class="nav-link" href="">Download</a>
        </li>
      </ul>
    </div>
  </nav>
</body>

</html>

0
投票

去除圆角（border-radious）

.navbar-toggler:focus {
    /*Below line will remove the border from the icon
    I have used bootstrap icon here */
    /* This will only remove the shadow effect */
    /* Border is still there */
    /* if you don't want any border then set the property equals to zero */
   /* box-shadow: none !important;*/
  
    /* This will remove the rounded corner(radious-border)
    and give square border */
     border-radius: 0 !important;
}

.navbar-toggler {
    /* This will completely remove border from the icon */
    /* If you need border for the icon then comment this code */
    /* border: 0 !important; */

    /* if you want to check the border please uncomment below code */
    /* border-color: yellow !important; */
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous">
  </script>

</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark mynav">
    <a class="navbar-brand" href=""> Logo</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon nti"></span>
        </button>

    <div class="collapse navbar-collapse" id="navbarNav">

      <ul class="navbar-nav ms-auto">
        <li class="navbar-item">
          <a class="nav-link" href="">Contact</a>
        </li>
        <li>
          <a class="nav-link" href="">Pricing</a>
        </li>
        <li>
          <a class="nav-link" href="">Download</a>
        </li>
      </ul>
    </div>
  </nav>
</body>

</html>

0
投票

这就是我的答案，

.navbar-toggler, .navbar-toggler:active, .navbar-toggler:focus{
   border-color: transparent !important;
   box-shadow: none !important;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.