引导区导航栏以自定义宽度折叠并显示图标



我可以使用引导程序自定义以下断点吗?

代码:-

<nav class="navbar navbar-expand-lg" style="background-color:#1B202C;">
<a class="navbar-brand" href="#"><img style="margin-left: 15px; margin-top: -20px;" class="logo" src="assets/logo.png" alt="logo"></a>
<button  class="navbar-toggler" data-toggle="collapse"  data-target="#collapsedNavBar"><span class="navbar-toggler-icon"></span></button>
<div class="fixed-nav">
<ul class="navbar-nav ">
<li id="nav-1" class="nav-item ">
<a class="nav-link" href="#">AAAAA</a>
</li>
<li id="nav-2" class="nav-item">
<a class="nav-link" href="#">BBBBB</a>
</li>
<li id="nav-3" class="nav-item">
<a class="nav-link" href="#">CCCCC</a>
</li>
</ul>
</div>
</nav>

但当我通过添加来覆盖它时

@media screen and (min-width:633px) and (max-width:1072px) {
.collapse {
display: none !important;
}
}

到其CCD_ 1。然后导航栏在我的自定义断点(1072px(处折叠。但当到达-lg (≥992px)时,仍然出现hamburger icon。所以我需要知道的是,有没有什么方法可以在custom的宽度上也出现hamburger icon

谢谢!

如果在style.css1类导航栏根据其自定义值自动展开后,指定lgsmxsxl。例如,如果将navbar-expand-lg值写入nav class,它将以992px的宽度折叠,或者如果给navbar-expand-md,则它将以768px的宽度塌陷。您可以检查以下代码。我希望它对你有用。

button.navbar-toggler {
background-color: white;
}
span.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(41,41,41, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
<!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, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<title>Bootstrap</title>
</head>
<body>
<nav style="background-color: black;" class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Logo Example</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-link" href="#">AAA</a>
<a class="nav-link" href="#">BBB</a>
<a class="nav-link" href="#">CCC</a>
</div>
</div>
</nav>
</body>
</html>

相关内容

  • 没有找到相关文章

最新更新