我正在建立一个网站: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 -->
答案 0 :(得分:4)
我通过桌面和移动设备查看了您的代码。
在<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%。 (有相应的高度和设备高度 值,对于包含更改大小的元素的页面可能很有用 或基于视口高度的位置。)
初始缩放属性控制页面的缩放级别 先加载。最大规模,最小规模和用户可扩展性 属性控制用户如何放大或缩小页面。