文章/答案/技术大牛

发布

社区首页 >问答首页 >引导Navbar在自定义宽度下折叠并显示图标

问引导Navbar在自定义宽度下折叠并显示图标
EN

Stack Overflow用户

提问于 2022-02-13 17:36:02

回答 1查看 809关注 0票数 0

我可以使用引导自定义以下断点吗？

代码:-

<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;
    }
}

它的style.css。然后导航条在我的自定义断点(1072px)上崩溃。但是，当hamburger icon到达-lg (≥992px)时仍然会出现。所以我需要知道的是，是否有任何方法在custom宽度上折叠，也会出现hamburger icon。

谢谢！

html

css

navbar

hamburger-menu

bootstrap5-modal

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-02-13 21:14:52

如果在lg类之后给出navbar-expand、sm、xs或xl，那么导航条就会根据它的自定义值自动展开。例如，如果将navbar-expand-lg值写入nav class，则它以992 at宽度折叠，如果给navbar-expand-md，则折叠到768 at。你可以检查下面的代码。我希望它对你有用。

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71103247

复制

相似问题

问引导Navbar在自定义宽度下折叠并显示图标
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导Navbar在自定义宽度下折叠并显示图标EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导Navbar在自定义宽度下折叠并显示图标
EN