我不明白为什么 Bootstrap 菜单没有显示在手机/平板电脑上? 你可以在这里看到直播:https://simpleeats.cratejoy.com/
最佳答案
因为你的 navbar-brand
设置为 100% 宽度它实际上覆盖了你的 navbar-toggle
按钮,这就是为什么当您单击切换按钮时,您会被 Bootstrap 回到您的索引页面:参见图片。
您可以更改 navbar-toggle
的 z-index类(z-index: 1060;
有效)或设置图像的宽度。
旁注:由于 img-responsive
,您会看到一些不良行为当您切换菜单打开时附加到 Logo 的类,但您不应该需要此类。
固定宽度的工作演示,居中 navbar-brand
图片。
/**FOR DEMO ONLY**/
.navbar .navbar-brand {
padding-top: 0;
}
.navbar .navbar-toggle.lefty {
float: left;
margin-left: 15px;
}
/**FOR DEMO ONLY**/
@media (max-width: 768px) {
.navbar .navbar-brand {
position: absolute;
width: 200px;
left: 50%;
transform: translateX(-50%);
background: red;
}
.navbar .navbar-brand img {
margin: 0 auto;
}
}
<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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="http://placehold.it/150x50">
</a>
<!--FOR DEMO ONLY -->
<button type="button" class="navbar-toggle collapsed lefty" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--FOR DEMO ONLY -->
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
</li>
<li><a href="#">Link</a>
</li>
</ul>
</div>
</nav>
关于html - Bootstrap 菜单未在移动设备上显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34027226/