Is there a best practice using twitter bootstrap when it comes to have a navbar with both items that are permanently fixed (even on mobile) and others that do collapse. When I try to add items outside of the collapse spacing gets removed on mobile devices. I could manually add a css rule, but I'm thinking there might be a way built in to handle this. Your advice would be greatly appreciated.
Mobile (with spacing issue):
HTML:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">My App</a>
<div id="timer" class="navbar-text glyphicon glyphicon-time"><a href="#"></a></div>
<div id="items-due" class="navbar-text glyphicon glyphicon-pencil"></div>
<div id="add-button" class="navbar-text glyphicon glyphicon-plus-sign"></div>
<div id="audio-button" class="navbar-text glyphicon glyphicon-volume-off"></div>
<div id="info-button" class="navbar-text glyphicon glyphicon-info-sign"></div>
<div id="back-button" class="navbar-text glyphicon glyphicon-backward"></div>
<div id="next-button" class="navbar-text glyphicon glyphicon-forward"></div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li id="forums-button"><a href="#">Forums</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
So to recap, what's the best way to have navbar items that don't collapse and are properly spaced on mobile displays?