CSS 在 Twitter Bootstrap 中居中导航
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10939481/
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
Center the nav in Twitter Bootstrap
提问by pelachile
I want to be able to center the nav dead middle of a page and have it stayed centered in different resolutions. I don't want to use offsets to push it over or margin-left as this would just screw it up in different browser widths. This is the typical bar that I am messing around with but the ul always winds up left aligned.
我希望能够将页面的导航死区居中，并使其以不同的分辨率居中。我不想使用偏移量将其推过或留有边距，因为这只会在不同的浏览器宽度中将其搞砸。这是我正在处理的典型酒吧，但 ul 总是左对齐。
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Menu</a></li>
<li><a href="#">On Tap</a></li>
<li><a href="#">Shows</a></li>
<li><a href="#">Surfwear</a></li>
<li><a href="#" >Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- container -->
</div><!-- navbar-inner -->
</div><!-- navbar navbar-fixed-top -->
回答by John Klakegg
Possible duplicate of Modify twitter bootstrap navbar. I guess this is what you are looking for (copied):
修改 twitter bootstrap navbar 的可能重复。我想这就是你要找的（复制）：
.navbar .nav,
.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.navbar-inner {
text-align:center;
}
As stated in the linked answer, you should make a new class with these properties and add it to the nav div.
如链接的答案中所述，您应该使用这些属性创建一个新类并将其添加到导航 div。
回答by Zim
For anyone needing this for Bootstrap 3, it is now much easier.
对于任何需要 Bootstrap 3 的人来说，现在它更容易了。
The new nav-justifiedclass can be used to center all of the navbar links..
新nav-justified类可用于将所有导航栏链接居中。
http://www.bootply.com/g3g125MLGr
http://www.bootply.com/g3g125MLGr
<div class="navbar">
<ul class="nav nav-justified" id="myNav">
<li><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
Or with a little CSS you can center just the brand/logo, and keep the left/right links separate..
或者使用一点 CSS，您可以仅将品牌/徽标居中，并将左/右链接分开。
回答by guanome
回答by moryde
http://www.bootply.com/3iSOTAyumPin this example the button for collapse was not clickable because the .navbar-brand was in front.
http://www.bootply.com/3iSOTAyumP在这个例子中，折叠按钮不可点击，因为 .navbar-brand 在前面。
http://www.bootply.com/RfnEgu45qRthere is an updated version where the collapse buttons is actually clickable.
http://www.bootply.com/RfnEgu45qR有一个更新版本，折叠按钮实际上是可点击的。
回答by Medhat Mahmoud
.navbar-right {
margin-left:auto;
margin-right:auto;
max-width :40%;
float:none !important;
}
just copy this code and change max-widthas you like
只要复制该代码和改变max-width，只要你喜欢
回答by Nicolas Maloeuvre
I prefer this :
我更喜欢这个：
<nav class="navbar">
<div class="hidden-xs hidden-sm" style="position: absolute;left: 50%;margin-left:-56px;width:112px" id="centered-div">
<!-- this element is on the center of the nav, visible only on -md and -lg -->
<a></a>
</div>
<div class="container-fluid">
<!-- ...things with your navbar... -->
<div class="visible-xs visible-sm">
<!-- this element will be hidden on -md and -lg -->
</div>
<!-- ...things with your navbar... -->
</div>
</nav>
The element is perfectly centered, and will be hidden on some screen sizes (there was no place left on -xs and -sm for me for example). I get the idea from Twitter's actual navbar
该元素完全居中，并将隐藏在某些屏幕尺寸上（例如，对我来说 -xs 和 -sm 上没有剩余位置）。我的想法来自 Twitter 的实际导航栏
回答by SERGIO
Code used basic nav bootstrap
使用基本导航引导程序的代码
<!--MENU CENTER`enter code here` RESPONSIVE -->
<div class="container-fluid">
<div class="container logo"><h1>LOGO</h1></div>
<nav class="navbar navbar-default menu">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar2"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar2">
<ul class="nav nav-justified" >
<li><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<!-- END MENU-->回答by dumP
For Bootstrap v4 check this:
对于 Bootstrap v4，请检查：
https://v4-alpha.getbootstrap.com/components/pagination/#alignment
https://v4-alpha.getbootstrap.com/components/pagination/#alignment
only add class to ul.pagination:
只向 ul.pagination 添加类：
<nav">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
