【问题标题】:meteor: Bootstrap navigation not aligned properly流星:引导导航未正确对齐
【发布时间】:2015-06-05 13:32:29
【问题描述】:

我正在尝试按照本指南添加引导导航栏:http://robertdickert.com/blog/2014/05/09/set-up-navigation-with-iron-router-and-bootstrap/。但是,该品牌始终出现在链接列表的单独行上。即(下划线只是为了显示缩进):

品牌
__链接1 链接2 链接3

这是流星列表的输出:

accounts-password  1.1.0* Password support for accounts
accounts-ui        1.1.5  Simple templates to add login widgets to an app
autopublish        1.0.3  Publish the entire database to all clients
bootstrap          1.0.1  Front-end framework from Twitter
iron:router        1.0.7  Routing specifically designed for Meteor
meteor-platform    1.2.2  Include a standard set of Meteor packages in your app  

这里是相关的html。我没有添加任何css代码,只通过meteor add安装了引导程序。

<template name="layout">
  <div class="container">
    <header>
      {{> nav}}
    </header>
      <body>{{> yield}}</body>
  </div>
</template>

<template name='nav'>
  <nav class="navbar navbar-default" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <a class="btn btn-navbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        {{> navBrand}}
      </div>
      <div class="navbar-collapse">
        <ul class="nav navbar-nav">
          {{> navItems}}
        </ul>
      </div>
    </div><!-- /.container-fluid -->
  </nav>
</template>

<template name="navBrand">
  <a class="navbar-brand" href="{{ pathFor 'home' }}">MyApp</a>
</template>

<template name='navItems'>
  <li class="{{ activeIfTemplateIs 'link1' }}">
    <a href="{{ pathFor 'link1'}}">Link1</a>
  </li>
  <li class="{{ activeIfTemplateIs 'link2' }}">
    <a href="{{ pathFor 'link2'}}">Link2</a>
  </li>
  <li class="{{ activeIfTemplateIs 'link3' }}">
    <a href="{{pathFor 'link3'}}">Link3</a>
  </li>
</template>

【问题讨论】:

    标签: html twitter-bootstrap meteor nav


    【解决方案1】:

    问题是我没有安装 bootstrap 3。修复它:

    meteor remove bootstrap
    meteor add mizzao:bootstrap-3
    

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-07-09
    • 2016-11-22
    • 1970-01-01
    • 2018-04-08
    • 2018-10-02
    相关资源
    最近更新 更多