引导菜单和汉堡包在一起

Question

Bootstrap4中显示菜单和汉堡菜单的最佳方式是什么（在导航栏中）？ 想法是通过汉堡菜单不太重要的菜单元素。 谢谢你的帮助！ 杰拉德

Answer 1

检查此示例并尝试根据您的情况对其进行调整：

codepen.io/Plagu33/pen/yoNOJw

Answer 2

汉堡菜单示例您可以查看 getbootstrap.com：

<

nav class="navbar navbar-inverse navbar-static-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="contact.php">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

Answer 3

如果你 go 到官方引导网站。 https://getbootstrap.com/docs/4.0/components/navbar/ ，有很多导航栏的例子。

主要思想是屏幕断点。 决定显示hamburger图标的断点。

在 bootstrap-4 中，这由实用程序 class navbar-expand-X控制。 因此，如果我们想在屏幕尺寸中等及以下时显示我们的汉堡图标，我们将在父nav元素上使用navbar-expand-md 。

<nav class="navbar navbar-expand-md navbar-light bg-light">...</nav>

Bootstrap 将为导航栏提供它自己的 styles，然后我们可以根据我们的要求用我们自己的自定义 styles 覆盖它。