gpt4 book ai didi

jquery - Bootstrap 中的移动 View 菜单未正确隐藏

转载 作者:行者123 更新时间:2023-11-28 08:43:15 25 4
gpt4 key购买 nike

大家好,我正在尝试使用 Bootstrap 制作左侧菜单。我使用 jQuery 为按钮点击切换菜单显示/隐藏。桌面 View 一切正常。但是在移动 View 中,按钮不在菜单旁边,如下图所示。

桌面 View Desktop View

移动 View

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

我的代码有什么问题吗?如何在移动 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com