引导导航栏崩溃在计算机上而不是在 iPhone 上工作

Posted 2023-03-24

【中文标题】引导导航栏崩溃在计算机上而不是在 iPhone 上工作

【英文标题】：bootstrap navbar collapse working on computer not on iphone

【发布时间】：2013-06-19 15:23:52

【问题描述】：

当我将计算机屏幕的大小调整到 980 像素以下时，我的固定导航栏可以正常工作。一旦我的屏幕为 979px 或更小，导航栏折叠就会启动并完美运行。

但是，当我将代码推送到 Heroku 并在我的 iPhone 4S 上加载该网站时，我的导航栏不仅没有崩溃，而且看起来有点不同 - 浮标正好落在徽标下方，导致它看起来很奇怪。

这是我的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);

这是我的标题 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>

【参考方案1】：

我要提到两件事。确保您在 html 文档的头部设置了正确的视口

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

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