实现导航抽屉引导程序答案

【问题标题】：Implementing Navigation drawer bootstrap实现导航抽屉引导程序
【发布时间】：2015-09-18 02:39:03
【问题描述】：

我正在尝试使用 Boostrap 为我的网站实现一个抽屉式导航主题。我可以将桌面屏幕大小的导航栏转换为小屏幕的导航抽屉按钮。然而，我想要实现的是在左侧获取抽屉的 3 个条形图标，并且在较小的屏幕尺寸上不应该看到“MyName”。有人能帮帮我吗？

我的 HTML 代码是：

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container"> <a href="#" class="navbar-brand">MyName</a>

            <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">  <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>

            </button>
            <div class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">ABOUT ME<span class="sr-only">(current)</span></a>
                    </li>
                    <li><a href="#">RESUME</a>
                    </li>
                    <li><a href="#">PROJECTS</a>
                    </li>
                    <li><a href="#">BLOG</a>
                    </li>
                    <li><a href="#">CONTACT</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

我为此创建了一个 JSFiddle：https://jsfiddle.net/DTcHh/9394/

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

添加以下类：hidden-xs (class="navbar-brand hidden-xs") 和 pull-left (class='navbar-toggle pull-left")

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container"> <a href="#" class="navbar-brand hidden-xs">MyName</a>

    <button class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navHeaderCollapse">    <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>

    </button>
    <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">ABOUT ME<span class="sr-only">(current)</span></a>
            </li>
            <li><a href="#">RESUME</a>
            </li>
            <li><a href="#">PROJECTS</a>
            </li>
            <li><a href="#">BLOG</a>
            </li>
            <li><a href="#">CONTACT</a>
            </li>
        </ul>
    </div>
</div>

【讨论】：

谢谢！有用。但是有可能吗，因为导航抽屉的内容位于左侧而不是顶部。就像 Iphone 上的 Gmail 应用程序一样。按下抽屉式导航按钮时，所有选项都在左侧，主页面向左移动
这绝对是可能的，但你必须重组你的导航元素来实现这一点：看看这个 SO Post - stackoverflow.com/questions/19397140/…
感谢您的链接！ :)