导航栏下的Bootstrap Off Canvas菜单

Question

如果您觉得我提出的问题有点愚蠢，请原谅我。

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

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

如果你看这个链接，你会看到页面顶部的导航栏和右边的列表。当我们减小页面导航栏的大小时，将变为菜单图标，列表将消失。此外，还会添加新按钮以显示隐藏列表。（请参阅下面的 大屏幕 图片）

我需要的是移动在小屏幕上可见的链接/按钮应该添加到导航栏的左侧。 Simmiler是我们在小屏幕上显示菜单的图标。（见下面的 小屏幕 图像）

大屏幕

小屏幕

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

Answer 2

尝试使用按钮上的pull-left类而不是默认的pull-right类。

示例：http://www.bootply.com/274FaWMbMX

这种设计的缺陷是，在用户点击按钮访问菜单后，由于菜单扩展，该按钮不再可见。