javascript - 导航栏下的 Bootstrap Off Canvas 菜单

Question

如果你觉得我问的问题有点傻，请原谅我。

我正在尝试使用 Bootstrap NavBar 和 Off Canvas 创建 HTML 页面，并找到了与我想要的完全相同的页面。在现有功能之上，我需要一个额外的功能。

http://getbootstrap.com/examples/offcanvas/

如果您查看此链接，您将在页面顶部看到导航栏，并在右侧看到列表。当我们减小页面的大小时，导航栏将变成菜单图标，列表将消失。还将添加新按钮以显示隐藏列表。(见下面的大屏幕图像)

我需要移动在小屏幕上可见的链接/按钮应该添加到导航栏的左侧。更简单的一种图标，我们在小屏幕上为菜单设置的图标。(见下面的小屏幕图像)

大屏幕

小屏幕

Answer 1

您可以像这样将切换按钮放入导航栏中..

<div class="navbar-header">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
       </button>
       <button type="button" class="navbar-toggle visible-xs pull-left" data-toggle="offcanvas">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
       </button>
       <a class="navbar-brand" href="#">Project name</a>
</div>

Codeply demo