gpt4 book ai didi

html - 在移动 View 中单击时菜单不会展开

转载 作者:太空宇宙 更新时间:2023-11-04 13:13:02 26 4
gpt4 key购买 nike

出于某种原因,菜单图标在移动 View 中没有展开,不确定我做错了什么。有人可以看看让我知道吗?谢谢! http://10.60.53.115/staging/sijie/Monster_UX_bootstrap/index.html

HTML:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">
<i class="fa fa-bars"></i>
</button>
<a href="#" class="navbar-brand"><img class="img-responsive" src="http://media.newjobs.com/homepage/images/Monster_UX/logo.png"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right hidden-xs">
<li role="presentation" class="active"><a href="#">About Us</a></li>
<li role="presentation"><a href="#projects">What We Do</a></li>
<li role="presentation"><a href="#join">Join the Team</a></li>

<li class="form">
<form class="search-container" action="//llamaswill.tumblr.com/search">
<input id="search-box" type="text" class="search-box" name="q" />
<label for="search-box"><span class="glyphicon glyphicon-search search-icon"></span></label>
<input type="submit" id="search-submit"/>
</form>
</li>
</ul>

</div>
</div><!--end container-fluid-->

最佳答案

您在导航栏的错误部分设置了 IMG。为了在点击时激活移动菜单,您需要将 IMG 链接移动到 class="navbar-toggle" 按钮。

.navbar .navbar-header .navbar-toggle {
padding: 6px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<img src="http://placehold.it/40x20/000/000">
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>

<div class="collapse navbar-collapse" id="navbar">

<ul class="nav navbar-nav">
<li class="active"><a href="#">About Us <span class="sr-only">(current)</span></a>
</li>
<li><a href="#">What We Do</a>
</li>
<li><a href="#">Join the Team</a>
</li>
</ul>

<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

</div>

</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

关于html - 在移动 View 中单击时菜单不会展开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31144835/

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