twitter-bootstrap 如何在 Twitter 引导程序中放置右侧固定导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21964500/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to place right side fixed navigation bar in Twitter bootstrap
提问by Ajay
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 个导航按钮。单击后，我将能够导航到同一页面中的各个 div。（就像单页设计一样）。
I am adding following lines of codes to create 4 navigation buttons at right side of the page.
我正在添加以下代码行以在页面右侧创建 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>
But those lines of codes are not placing my 4 buttons at extreme right. Check snapshot.
但是这些代码行并没有将我的 4 个按钮放在最右边。检查快照。
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).
可以使用哪些引导类将其放置在最右侧，而那些应该固定到位。（响应性应该得到很好的照顾）。
采纳答案by Nav
You actually need to use navbar-right, as I found out from hereand used in my code:
你实际上需要使用 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 -->
回答by Sergio Wizenfeld
you can use .navbar-rightand also add position: fixed; right: 0;.
that should do the trick
您可以使用.navbar-right并添加position: fixed; right: 0;. 这应该够了吧
回答by user3342524
HTML
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
CSS
.nav {
position: fixed;
float:right;
margin-right: 0px;
}
