twitter-bootstrap bootstrap 导航栏崩溃在计算机上而不是在 iphone 上工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17253142/
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 working on computer not on iphone
提问by wkernan
My fixed navbar works fine when I resize my computer screen to below 980px. Once my screen is 979px or less the navbar collapse kicks in and works perfectly.
当我将计算机屏幕的大小调整到 980 像素以下时，我的固定导航栏工作正常。一旦我的屏幕小于等于 979 像素，导航栏就会开始折叠并完美运行。
However, when I push code up to Heroku and load the site on my iPhone 4S, not only does my navbar not collapse, but it looks a bit different -- the float right drops underneath the logo causing it to look weird.
然而，当我将代码推送到 Heroku 并在我的 iPhone 4S 上加载网站时，我的导航栏不仅没有折叠，而且看起来有点不同——浮动右侧落在徽标下方，导致它看起来很奇怪。
Here is my custom.css.scssfile:
这是我的custom.css.scss文件：
@import "bootstrap";
@import "bootstrap-responsive";
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: 61px;
}
@media (max-width: 979px) and (min-width: 768px) {
body {
padding-top: 0;
}
}
@media (max-width: 768px) {
body {
padding-top: 0;
}
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
}
.center h1 {
margin-bottom: 10px;
}
.container {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
max-width: 1000px;
}
.span4 {
width: 323px;
margin-left: 20px;
text-align: center;
}
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: -20px;
padding-right: -20px;
}
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.7em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: $grayLight;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* header */
#logo {
float: left;
font-size: 1.7em;
color: #555555;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 5px;
font-weight: bold;
line-height: 2;
}
#logo:hover {
text-decoration: none;
}
.navbar-inner {
min-height: 60px;
}
.navbar .nav {
margin: 0 -13px 0 0;
}
.navbar-fixed-top .navbar-inner {
box-shadow: none;
border-bottom: 1px solid #d4d4d4;
}
.navbar .btn-navbar {
margin-top: 16px;
}
li {
line-height: 40px;
list-style: none;
}
#smedia {
padding: 10px 9px 10px 0px;
font-size: 16px;
text-shadow: none;
}
.navbar .divider-vertical {
margin: 10px 9px;
border-left: 1px solid rgb(218,218,218);
}
And here is my header HTML:
这是我的标题 HTML：
<header class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to "Professional Workroom of Design", root_path, id: "logo" %>
<div class="nav-collapse collapse" style="height: 0px;">
<ul class="nav pull-right">
<li class="divider-vertical"></li>
<li>
<a href="#" id="smedia">
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-linkedin icon-light" style="font-size: 22px;"></i>
</span>
</a>
</li>
<li>
<a href="#" id="smedia">
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-google-plus icon-light" style="font-size: 22px;"></i>
</span>
</a>
</li>
<li>
<a href="#" id="smedia">
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-twitter icon-light" style="font-size: 22px;"></i>
</span>
</a>
</li>
<li>
<a href="#" id="smedia">
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-facebook icon-light" style="font-size: 22px;"></i>
</span>
</a>
</li>
<li class="divider-vertical"></li>
<li><%= link_to "Home", root_path %></li>
<li><%= link_to "Portfolio", portfolio_path %></li>
<li><%= link_to "About", about_path %></li>
<li><%= link_to "Contact", contact_path %></li>
</ul>
</div>
</div>
</div>
</header>
回答by Kevin Lynch
Two things i would mention. Ensure you have the correcdt viewport set in the head of your html document
我要提到的两件事。确保在 html 文档的头部设置了正确的视口
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
And secondly I noticed that you media queries are a bit scattered. It is best to keep these contained together and at the END of the document. If they are not at the end of the CSS then other CSS will overwrite it despite the media query.
其次，我注意到您的媒体查询有点分散。最好将这些内容放在一起并放在文档的末尾。如果它们不在 CSS 的末尾，那么尽管有媒体查询，其他 CSS 也会覆盖它。
