bootstrap导航栏折叠工作在计算机上不在iphone上 [英] bootstrap navbar collapse working on computer not on iphone

问题描述

当我将电脑萤幕调整为980像素以下时，我的固定导航栏工作正常。一旦我的屏幕是979px或更小的导航栏崩溃踢和工作完美。

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.

然而，当我推代码到Heroku和加载网站在我的iPhone 4S，只有我的导航栏不折叠，但它看起来有点不同 - 浮动右下方的标志下面使它看起来很奇怪。

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.

这是我的 custom.css.scss file：

@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);
}

这里是我的标题HTML：

And here is my header 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>

推荐答案

确保您的HTML文档的头部中设置了correctcdt视口

Two things i would mention. Ensure you have the correcdt viewport set in the head of your html document

<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />

其次，我注意到你的媒体查询有点分散。最好将这些包含在一起，并在文档的结尾。如果他们不在CSS的结束，那么其他CSS将覆盖它，尽管媒体查询。

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.

这篇关于bootstrap导航栏折叠工作在计算机上不在iphone上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！