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