导航栏下的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演示

Answer 2

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

例如： http ： //www.bootply.com/274FaWMbMX

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