我试图让应用程序与移动浏览器很好地协作,让它在普通桌面上运行良好。我刚开始使用自适应布局的东西,所以这里有点新手。
我的bootstrap导航栏工作速度低至768px,如图所示
但在768px及以下它会这样做
所以,我显然在我的CSS中遗漏了一些内容,但我不知道如何让菜单堆叠起来,因为我认为它会在移动浏览器大小上自动化(并不是说bootstrap是什么意思为我做什么?)。
用于生成菜单的代码是
<template name="header">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="{{pathFor 'home'}}"><i class="glyphicon glyphicon-home"></i></a></li>
</ul>
<ul class="nav navbar-nav">
<li><a href="{{pathFor 'request'}}">Make a request</a></li>
</ul>
<ul class="nav navbar-nav">
<li><a href="{{pathFor 'pack'}}">Packing</a></li>
</ul>
<ul class="nav navbar-nav">
<li><a href="{{pathFor 'admin'}}">Admin</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
{{>loginButtons}}
</ul>
</div>
</div>
</template>
谢谢你们,我认为我缺乏理解力。
彼得。
答案 0 :(得分:3)
您需要在导航栏标记中包含以下内容;
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
请参阅导航栏上的文档here
答案 1 :(得分:1)
如果您使用正确的标签和类,Bootstrap将执行您期望的操作。对于导航栏,您错过了<div class="navbar-header">
,其中包含切换按钮以显示/隐藏较小视口上的菜单。代码如下:
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
navbar1
是您id
div的.navbar-collapse
。
<div class="navbar-collapse collapse" id="navbar1">
您还可以在div中添加锚标记,以添加任何徽标或品牌名称:
<a class="navbar-brand" href="#">Logo/Company name here</a>
DEMO (点击移动图标可在移动视图中查看)