导航栏崩溃 - >引导

我建立一个网站：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 -->

来源

2015-09-07 Krooy_mans

但事情是你已经把容器内的导航栏div总是产生问题 –

它的内部准备好了，不是吗？ –

尝试在'container'和'col-xs-12'网格内包装整个'navbar'。 –

我看了你的代码，通过桌面和移动。在<head>标记中，您缺少视口<meta>标记。

从引导documentation

自举2，我们增加了可选的移动友好的风格为框架的关键方面。借助Bootstrap 3，我们将项目从一开始就改写为移动友好。他们没有在上添加可选的移动样式，而是直接进入核心。事实上， Bootstrap是最先移动的。移动第一种风格可以在整个库中找到，而不是在单独的文件中。

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

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

Here你可以找到关于视窗基础一点解释。从那里我推断出这个解释：

width属性控制视口的大小。它可以被设置为特定数量的像宽度= 600或到处于CSS像素在屏幕的在刻度的100％的宽度的特殊值设备宽度值的像素。（有对应的高度和设备高度值，其可用于基于视口高度改变大小或位置元件的页面是有用的。）当所述页面是

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

来源

2015-09-07 18:01:44

哇，这太神奇了！ –

导航栏崩溃 - >引导

回答

相关问题