大家好，我正在尝试使用 Bootstrap 制作左侧菜单。我使用 jQuery 为按钮点击切换菜单显示/隐藏。桌面 View 一切正常。但是在移动 View 中，按钮不在菜单旁边，如下图所示。
桌面 View
移动 View
这是我的代码，
<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> Register</button>
<button type="button" class="navbar-toggle"><span class="glyphicon glyphicon-off"></span> 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> LogIn</button>
<button id="btn3" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span> 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>
我的代码有什么问题吗？如何在移动 View 中获得与 Dekstop View 相同的内容？你的帮助将是非常可观的。谢谢。
最佳答案
没关系找到它。因为我也在处理移动 View ，所以我应该使用 col-xs-3 而不是 col-sm-3。
<ul id="nav1" class="nav nav-pills nav-stacked col-xs-3">
关于jquery - Bootstrap 中的移动 View 菜单未正确隐藏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27732878/