html - meteor: Bootstrap navigation not aligned properly -
i'm trying add bootstrap navbar following guide: http://robertdickert.com/blog/2014/05/09/set-up-navigation-with-iron-router-and-bootstrap/. brand keeps appearing on separate line list of links. ie (underscore show indent):
brand
__link1 link2 link3
this output meteor list:
accounts-password 1.1.0* password support accounts accounts-ui 1.1.5 simple templates add login widgets app autopublish 1.0.3 publish entire database clients bootstrap 1.0.1 front-end framework twitter iron:router 1.0.7 routing designed meteor meteor-platform 1.2.2 include standard set of meteor packages in app here related html. didn't add css code, 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>
the problem didn't have bootstrap 3 installed. fixed with:
meteor remove bootstrap meteor add mizzao:bootstrap-3 
Comments
Post a Comment