我无法让 bootstrap 3 的导航栏在移动设备上响应。导航栏继续跨越移动显示,我无法弄清楚我做错了什么。
代码: (HTML)
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<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 img-responsive" href="index.html">
<img src="img/logo.png" width="320" height="85" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="index.html">Getting Started</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Products <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="products.html">Brain Seed™</a>
</li>
</ul>
</li>
<li>
<a href="about.html">About Us</a>
</li>
<li>
<a href="faq.html">FAQ</a>
</li>
<li>
<a href="contact.html">Contact Us</a>
</li>
<li>
<a href="contact.html"><button type="button pull-right" class="btn btn-success">ORDER NOW</button></a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
The Code: (CSS)
.navbar-fixed-top .nav {
padding: 20px 0;
}
.navbar-fixed-top .navbar-brand {
padding: 0 15px;
}
.page-content {
padding-top: 40px;
}
.img-center {
display: block;
margin: 0 auto;
}
.navbar .brand {
max-height: 40px;
max-width: 30%;
overflow: visible;
padding-top: 0;
padding-bottom: 0;
}
最佳答案
我注意到你在你的 html 代码中,你输入了固定的高度和宽度,这取消了 img-responsive 类。 首先删除它并从那里开始... enter link description here
关于html - Bootstrap 3 导航栏移动问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28549651/