导航栏折叠->引导程序

Question

I'm building a website: http://www.sbr-accounting.com/ 我正在建立一个网站： http : //www.sbr-accounting.com/

and now I have my menu responsive. 现在我的菜单响应了。 So when you decrease the width of the screen the menu will dissapear and only a Menu button will be shown. 因此，当减小屏幕宽度时，菜单将消失，并且仅显示菜单按钮。 Great! 大！

But how come that when I open the website on Iphone (5S) the menu is shown fully, I expected the menu will be shown collapsed as default. 但是，当我在Iphone（5S）上打开网站时，菜单完全显示出来了，我希望菜单默认显示为折叠状态。

Can anyone help me out here? 有人可以帮我从这里出去吗？

  <!-- 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

I looked your code, by desktop and mobile. 我通过台式机和移动设备查看了您的代码。 In the <head> tag, you are missing the viewport <meta> tag. 在<head>标记中，您缺少视口<meta>标记。

From Bootstrap documentation 从Bootstrap 文档

With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. 使用Bootstrap 2，我们为框架的关键方面添加了可选的移动友好样式。 With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. 使用Bootstrap 3，我们从一开始就将项目重写为移动友好型。 Instead of adding on optional mobile styles, they're baked right into the core. 它们没有添加可选的移动样式，而是直接嵌入到核心中。 In fact, Bootstrap is mobile first. 实际上，Bootstrap首先是移动设备。 Mobile first styles can be found throughout the entire library instead of in separate files. 可以在整个库中找到移动优先样式，而不是在单独的文件中找到。

To ensure proper rendering and touch zooming, add the viewport meta tag to your <head> . 为确保正确渲染和触摸缩放，请将视口meta标签添加到<head> 。

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

Here you can find a little explanation about viewport basics. 在这里，您可以找到有关视口基础知识的一些解释。 From there I've extrapolated this explanation: 从那里我推断出这种解释：

The width property controls the size of the viewport. width属性控制视口的大小。 It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. 可以将其设置为特定的像素数，例如width = 600或特殊值device-width值，该值是CSS像素的屏幕宽度，缩放比例为100％。 (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.) （有相应的height和device-height值，这对于包含根据视口高度更改大小或位置的元素的页面可能有用。）

The initial-scale property controls the zoom level when the page is first loaded. 初始缩放属性控制页面首次加载时的缩放级别。 The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out. 最大比例，最小比例和用户可缩放属性控制如何允许用户放大或缩小页面。

导航栏折叠->引导程序

问题描述

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