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 documentation

使用Bootstrap 2，我们为key添加了可选的移动友好样式   框架的各个方面。使用Bootstrap 3，我们重写了   项目从一开始就是移动友好的。而不是添加   可选的移动样式，它们直接融入核心。事实上，   Bootstrap首先是移动的。移动的第一个样式可以在整个过程   整个库而不是单独的文件。

要确保正确渲染和触摸缩放，请添加视口元   标记到<head>。

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

Here您可以找到关于视口基础知识的一些解释。从那里我推断出这个解释：

width属性控制视口的大小。它可以设置为   特定数量的像素，如width = 600或特殊值   device-width value，它是一个CSS像素的屏幕宽度   规模为100％。（有相应的高度和设备高度   值，对于包含更改大小的元素的页面可能很有用   或基于视口高度的位置。）

初始缩放属性控制页面的缩放级别   先加载。最大规模，最小规模和用户可扩展性   属性控制用户如何放大或缩小页面。

导航栏崩溃 - ＆gt;引导

1 个答案: