Meteor，Bootstrap-3，移动响应式布局

Question

我试图让应用程序与移动浏览器很好地协作，让它在普通桌面上运行良好。我刚开始使用自适应布局的东西，所以这里有点新手。

我的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>

谢谢你们，我认为我缺乏理解力。

彼得。

Answer 1

您需要在导航栏标记中包含以下内容;

<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

Answer 2

如果您使用正确的标签和类，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 （点击移动图标可在移动视图中查看）