如何在Twitter Bootstrap中将右侧固定导航栏放置正确位置

Question

我正在尝试在右侧添加4个导航按钮。点击后，我将能够导航到同一页中的相应div（就像单页面设计一样）。

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

    <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个按钮放在极右侧。请查看快照。

哪些bootstrap类可以用来使其放置在极右侧，并且这些类应该是固定位置的。（响应式应该得到很好的处理）。

- Ajay

Answer 1

你可以使用.navbar-right，并添加position: fixed; right: 0;。这样应该就可以了。

- Sergio Wizenfeld

Answer 2

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;

   }

- user3342524

Answer 3

你实际上需要使用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 -->

- Nav