Html 实现导航抽屉引导_Html_Css_Twitter Bootstrap

Html 实现导航抽屉引导

html css twitter-bootstrap

Html 实现导航抽屉引导,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正在尝试使用Boostrap为我的网站实现一个导航抽屉主题。我能够将桌面屏幕大小的导航栏转换为较小屏幕的导航抽屉按钮。然而，我正试图实现的是得到抽屉在左手边的3条图标和“我的名字”不应该在较小的屏幕尺寸上可见。谁能帮我一下吗我的HTML代码是： <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <a href=

我正在尝试使用Boostrap为我的网站实现一个导航抽屉主题。我能够将桌面屏幕大小的导航栏转换为较小屏幕的导航抽屉按钮。然而，我正试图实现的是得到抽屉在左手边的3条图标和“我的名字”不应该在较小的屏幕尺寸上可见。谁能帮我一下吗

我的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>

我已经为此创建了一个JSFIDLE:

添加以下类：

隐藏的xs

（

class=“navbar brand hidden xs”

）和

向左拉

（

class='navbar-toggle向左拉”

）

谢谢！它可以工作。但是，导航抽屉的内容可能在左侧而不是顶部。就像Iphone上的Gmail应用程序一样。当按下导航抽屉按钮时，所有选项都在左侧，主页向左移动。这当然是可能的，但你必须重新构建你的n航空元素来实现这一点：看看这篇文章-感谢链接！）

<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>