Question

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

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

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

实现导航抽屉引导程序

1 个答案: