twitter-bootstrapglyphiconstwitter-bootstrap-2
Placing chevron to the right - Navlist
Hello I'm trying to implement the navlist that can be found at http://twitter.github.io/bootstrap/components.html#navs I've looked at the source code and I've tried using their code and my own:
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-tabs nav-stacked bs-docs-sidenav span8">
<li><a href="#Variabler"><b>Variabler</b><i class="icon-chevron-right"></i></a></li>
<li><a href="#Datatyper"><b>Datatyper</b><i class="icon-chevron-right"></i></a></li>
<li><a href="#Funktioner"><b>Metoder</b><i class="icon-chevron-right"></i></a></li>
<li><a href="#"><b>Arrays</b><i class="icon-chevron-right"></i></a></li>
<li><a href="#"><b>Klasser</b><i class="icon-chevron-right"></i></a></li>
<li><a href="#variables"><b>HTML5</b><i class="icon-chevron-right"></i></a></li>
<li><a href="#variables"><b>CSS3</b><i class="icon-chevron-right"></i></a></li>
<li><a href="#variables"><b>jQuery</b><i class="icon-chevron-right"></i></a></li>
<li><a href="#variables"><b>AJAX</b><i class="icon-chevron-right"></i></a></li>
<li><a href="#variables"><b>PHP</b><i class="icon-chevron-right"></i></a></li>
<li><a href="#variables"><b>MySQL</b><i class="icon-chevron-right"></i></a></li>
<li><a href="#variables"><b>Twitter Bootstrap</b><i class="icon-chevron-right"></i></a></li>
</ul>
</div>
The result I get is this:
How can I place the chevrons to the right? Tried paying around with offset but the chevrons would be positioned differently depending on how long the string is.
Solution
You can add the 'pull-right' class to the icons:
<ul class="nav nav-tabs nav-stacked bs-docs-sidenav span8">
<li><a href="#Variabler"><b>Variabler</b><i class="icon-chevron-right pull-right"></i></a></li>
<li><a href="#Datatyper"><b>Datatyper</b><i class="icon-chevron-right pull-right"></i></a></li>
<li><a href="#Funktioner"><b>Metoder</b><i class="icon-chevron-right pull-right"></i></a></li>
...
</ul>