Bootstrap 中的移动视图菜单未正确隐藏答案

【问题标题】：Menu not hiding properly for mobile view in BootstrapBootstrap 中的移动视图菜单未正确隐藏
【发布时间】：2015-01-02 01:41:13
【问题描述】：

大家好，我正在尝试使用引导程序制作左侧菜单。我使用 jQuery 为按钮单击切换菜单显示/隐藏。桌面视图一切正常。但在移动端视图中，按钮不在菜单旁边，如下图所示。

桌面视图

移动视图

这是我的代码，

<body>
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
        $('#nav1').hide();
        $('#btn1').click(function () {
            $('#nav1').toggle("slow");
        });
    });
</script>
<div id="custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
    <div class="navbar-header"><a class="navbar-brand" href="#"><b style="font-size: 1.50em">Brand Name</b><br /><span style="font-size: .50em">Brand description</span></a>
        <button type="button" class="navbar-toggle"><span class="glyphicon glyphicon-pencil"></span> &nbsp; Register</button>
        <button type="button" class="navbar-toggle"><span class="glyphicon glyphicon-off"></span> &nbsp; LogIn</button>
    </div>
    <div class="collapse navbar-collapse navbar-menubuilder">
        <ul class="nav navbar-nav navbar-right">
            <button id="btn2" class="btn btn-default"><span class="glyphicon glyphicon-off"></span> &nbsp; LogIn</button>
            <button id="btn3" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span> &nbsp; Register</button>
        </ul>
    </div>
</div>
</div><br /><br /><br /><br />
    <button id="btn1" class="btn btn-default glyphicon glyphicon-home"></button>
    <ul id="nav1" class="nav nav-pills nav-stacked col-sm-3">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">About</a></li>
</ul>
</body>

我的代码有什么问题吗？如何在移动视图中获得与 Dekstop 视图相同的效果？你的帮助将是非常可观的。 Tnx。

【问题讨论】：

标签： jquery css twitter-bootstrap

【解决方案1】：

没关系找到它。由于我也在研究移动视图，所以我应该使用col-xs-3 而不是col-sm-3。

<ul id="nav1" class="nav nav-pills nav-stacked col-xs-3">

【讨论】：