如何在Twitter引导程序中放置右侧固定导航栏

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

您可以使用.navbar-right并添加position: fixed; right: 0;。 应该做的伎俩

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;

   }

Answer 3

你实际上需要使用navbar-right，因为我从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 -->