twitter-bootstrap Bootstrap 导航栏折叠不适用于移动设备
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30763652/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap navbar collapse not working on mobile devices
提问by Chris Brown
If I resize my browser It works perfectly, but if I access it from my phone/tablet it loads the uncollapsed desktop version, and incorrectly at that.
如果我调整浏览器的大小它运行良好，但如果我从我的手机/平板电脑访问它，它会加载未折叠的桌面版本，并且错误地加载。
Any issues with my html?
我的html有问题吗？
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="/">
<i class="fa fa-car"></i> <span class="light">Title</span>
</a>
</div>
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Heres the relevant styles as well...
这里还有相关的样式......
.navbar-custom {
margin-bottom: 0;
border-bottom: 1px solid rgba(255,255,255,.3);
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
@media(max-width: $screen-xs-max) {
background-color: #000;
}
}
.navbar-custom .navbar-brand {
font-weight: 700;
}
.navbar-custom .navbar-brand:focus {
outline: 0;
}
.navbar-custom .navbar-brand .navbar-toggle {
padding: 4px 6px;
font-size: 16px;
color: #fff;
}
.navbar-custom .navbar-brand .navbar-toggle:focus,
.navbar-custom .navbar-brand .navbar-toggle:active {
outline: 0;
}
.navbar-custom a {
color: darken(#fff, 20%);
}
.navbar-custom .nav li a {
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}
.navbar-custom .nav li a:hover {
outline: 0;
color: rgba(255,255,255,.8);
background-color: transparent;
}
.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:active {
outline: 0;
background-color: transparent;
}
.navbar-custom .nav li.active {
outline: 0;
}
.navbar-custom .nav li.active a {
background-color: rgba(255,255,255,.3);
}
.navbar-custom .nav li.active a:hover {
color: #fff;
}
@media(min-width:768px) {
.navbar-custom {
padding: 20px 0;
border-bottom: 0;
letter-spacing: 1px;
background: 0 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.navbar-custom.top-nav-collapse {
padding: 0;
border-bottom: 1px solid rgba(255,255,255,.3);
background: url('home/wood2.jpg') no-repeat center center fixed; }
}
I'm using bootstrap-sass on rails 4 if it means anything.
如果有任何意义，我将在 rails 4 上使用 bootstrap-sass。
Thanks!
谢谢！
回答by Chris Brown
Noob mistake.
菜鸟错误。
Was missing
失踪
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
in the head section of application.html.erb.
在 application.html.erb 的 head 部分。
:/
：/
回答by Denise
So far the only thing that I could see wrong with your code is that, your button class is missing the navbar-toggle collapsedclass also replace <i class="fa fa-car"></i> with <span class="sr-only">toggle navigation</span>
到目前为止，我唯一能看出您的代码有问题的是，您的按钮类缺少navbar-toggle collapsed该类也替换了<i class="fa fa-car"></i> with <span class="sr-only">toggle navigation</span>
Another thing you should check and see if css file is linked properly. Your bootstrap.cssfile should be in the head of the index.htmlfile.
Place your java right before the closing </body>
您应该检查并查看css文件是否正确链接的另一件事。您的bootstrap.css文件应该在文件的头部index.html。将您的 java 放在关闭之前</body>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
The best solution is to edit the navbar component from the getbootstrap website. [Here's my pen][1]
最好的解决方案是从 getbootstrap 网站编辑导航栏组件。[这是我的笔][1]
[1]: http://www.bootply.com/ESP6oCWSBA
