如何将右侧固定导航栏放在Twitter引导 [英] How to place right side fixed navigation bar in Twitter bootstrap

问题描述

我想在右侧添加4个导航按钮。点击时，我可以导航到同一页面中的各个div（就像单页设计一样）。

I am trying to add 4 navigation buttons at right side. On Clicking which I would be able to navigate to respective divs in the same page.(just like a single page design).

我添加了以下代码行4个导航按钮在页面的右侧。

I am adding following lines of codes to create 4 navigation buttons at 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>

但是这些代码行没有把我的4个按钮放在极端。检查快照。

But those lines of codes are not placing my 4 buttons at extreme right. Check snapshot.

哪个引导类可以用于将其放置在极右侧，并且那些应该固定在位置。 （响应性应该很好地照顾）。

Which bootstrap classes can be used to make it place at extreme right side and those should be fixed in position. (responsiveness should be well taken care of).

推荐答案

你实际上需要使用navbar-right， a href =http://stackoverflow.com/a/22652343/453673>这里，并在我的代码中使用：

You actually need to use navbar-right, as I found out from here and used in my code:

        <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 -->

这篇关于如何将右侧固定导航栏放在Twitter引导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！