导航栏折叠->引导程序

Question

我正在建立一个网站： http : //www.sbr-accounting.com/

现在我的菜单响应了。 因此，当减小屏幕宽度时，菜单将消失，并且仅显示菜单按钮。 大！

但是，当我在Iphone（5S）上打开网站时，菜单完全显示出来了，我希望菜单默认显示为折叠状态。

有人可以帮我从这里出去吗？

  <!-- Create full width navbar -->
    <div class='navbar navbar-default navbar-static-top'>

      <!-- Inside full width navbar create a container -->
      <div class='container'>

        <div class='navbar-header'>
          <!-- Website title including home link -->
          <a href='index.html' class='navbar-brand'>SBR-accounting</a>


          <!-- Create nav icon for small displays. The text should only be visible for screen readers -->
          <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>  <span class='sr-only'>Toggle navigation</span>    

          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          </button>
         </div>

          <ul class='nav navbar-nav navbar-right collapse navbar-collapse'>
            <li><a href='/'>home</a></li>
            <li><a href='/'>Informatie</a></li>
            <li><a href='/'>Contact</a></li>
          </ul>

        </div> <!-- Close container inside navbar -->
      </div> <!-- Close full width navbar -->

Answer 1

我通过台式机和移动设备查看了您的代码。 在<head>标记中，您缺少视口<meta>标记。

从Bootstrap 文档

使用Bootstrap 2，我们为框架的关键方面添加了可选的移动友好样式。 使用Bootstrap 3，我们从一开始就将项目重写为移动友好型。 它们没有添加可选的移动样式，而是直接嵌入到核心中。 实际上，Bootstrap首先是移动设备。 可以在整个库中找到移动优先样式，而不是在单独的文件中找到。

为确保正确渲染和触摸缩放，请将视口meta标签添加到<head> 。

<meta name="viewport" content="width=device-width, initial-scale=1">

在这里，您可以找到有关视口基础知识的一些解释。 从那里我推断出这种解释：

width属性控制视口的大小。 可以将其设置为特定的像素数，例如width = 600或特殊值device-width值，该值是CSS像素的屏幕宽度，缩放比例为100％。 （有相应的height和device-height值，这对于包含根据视口高度更改大小或位置的元素的页面可能有用。）

初始缩放属性控制页面首次加载时的缩放级别。 最大比例，最小比例和用户可缩放属性控制如何允许用户放大或缩小页面。

导航栏折叠->引导程序

问题描述

1 个解决方案

解决方案1
4 已采纳 2015-09-07 18:01:44

导航栏折叠-&gt;引导程序

问题描述

1 个解决方案

解决方案1 4 已采纳 2015-09-07 18:01:44

导航栏折叠->引导程序

解决方案1
4 已采纳 2015-09-07 18:01:44