meteor: Bootstrap navigation not aligned properly
Question
I'm trying to add a bootstrap navbar following this guide: http://robertdickert.com/blog/2014/05/09/set-up-navigation-with-iron-router-and-bootstrap/ . However the brand keeps appearing on a separate line from the list of links. ie (underscore is just to show the indent):
Brand
__Link1 Link2 Link3
This is the output from meteor list:
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
Here is the related html. I didn't add any css code, only installed bootstrap via 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>
1 answers
solution1
0 2015-04-01 02:26:15
The problem was I didn't have bootstrap 3 installed. Fixed it with:
meteor remove bootstrap
meteor add mizzao:bootstrap-3
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.