如何在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个按钮放在最右边。检查快照。

​

可以使用哪些引导程序类将其放在最右侧，而这些引导程序类应该固定在适当的位置。(响应性应该得到很好的照顾)。

Answer 1

你实际上需要使用导航栏，就像我从here中发现的，并在我的代码中使用：

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

Answer 2

您可以使用.navbar-right，也可以添加position: fixed; right: 0;。这应该会起作用。

Answer 3

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;

   }