导航栏下的 Bootstrap Off Canvas 菜单答案

【问题标题】：Bootstrap Off Canvas menu under Navigation Bar导航栏下的 Bootstrap Off Canvas 菜单
【发布时间】：2015-06-25 19:36:39
【问题描述】：

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

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

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

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

我需要的是移动在小屏幕上可见的链接/按钮应该添加到导航栏的左侧。类似我们在小屏幕上用于菜单的图标。（见下小屏幕图片）

大屏幕

小屏幕

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案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

【讨论】：

非常感谢@Skelly。如何向左侧菜单图标添加填充？

【解决方案2】：

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

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

这种设计的缺陷是用户点击按钮进入菜单后，由于菜单展开，按钮不再可见。

【讨论】：