Geek asks and answers

How to place the right side navigation bar on Twitter bootstrap

I am trying to add 4 navigation buttons on the right side. On Clicking, on which I could go to the corresponding divs on one page. (Just like a single page design).

I am adding the following lines of code to create 4 navigation buttons on the right side of the page.

    <div data-spy="affix" class="offset8 span1 well offset7 small">
        <ul class="nav nav-list">
            <a class=".move-1" data-target=".home-1-image"> A </a>
            <a class=".move-1" data-target=".home-2-image"> B </a>
            <a class=".move-1" data-target=".home-3-image"> C </a>
            <a class=".move-1" data-target=".home-4-image"> D </a>
        </ul>
  </div>

But these lines of code do not put my 4 buttons in the far right order. Check out the snapshot. enter image description here

What boot classes can be used to make them at the far right level, and they need to be fixed in place. (responsiveness should be well considered).

+3
source share
3 answers

navbar-right, :

        <div class="navbar-collapse collapse navbar-right" >
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu pull-right" role="menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!--/.nav-collapse -->
0

.navbar-right, position: fixed; right: 0;.

+5

HTML

<div data-spy="affix" class="offset8 span1 well offset7 small  nav">
        <ul class="nav nav-list">
            <a class=".move-1" data-target=".home-1-image"> A </a>
            <a class=".move-1" data-target=".home-2-image"> B </a>
            <a class=".move-1" data-target=".home-3-image"> C </a>
            <a class=".move-1" data-target=".home-4-image"> D </a>
        </ul>
</div>

CSS

.nav {

    position: fixed;
    float:right;
    margin-right: 0px;

   }
0
source

More articles:


All Articles