在Twitter Bootstrap中导航
我希望能够将导航中心locking在页面中间，并使其保持以不同的分辨率为中心。 我不想使用偏移量来推动它或保留余量，因为这只是将其拧在不同的浏览器宽度。 这是我正在搞的一个典型的酒吧，但是UL总是左alignment。
<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 --> 修改twitter bootstrap导航栏的可能重复。 我想这是你正在寻找（复制）：
.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; }
正如链接的答案中所述，您应该使用这些属性创build一个新类并将其添加到导航div。
对于任何需要Bootstrap 3的人来说，它现在变得更容易了。
新的nav-justified类可以用来居中所有的导航条链接。
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>
或者用一个小小的CSS，你可以把品牌/标识作为中心，并保持左右链接分开。
您可以使.navbar固定宽度，然后将其左右边距设置为auto 。
演示
.navbar{ width: 80%; margin: 0 auto; }
http://www.bootply.com/3iSOTAyumP在这个例子中，由于;.navbar品牌在前面，因此崩溃button不可点击。
http://www.bootply.com/RfnEgu45qR有一个更新的版本，其中折叠button实际上是可点击的。;
.navbar-right { margin-left:auto; margin-right:auto; max-width :40%; float:none !important; }
只需复制此代码并根据需要更改max-width
我更喜欢这个：
<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>
元素是完全居中的，并且会隐藏在一些屏幕尺寸上（例如，我没有在-xs和-sm上留下任何地方）。 我从Twitter的实际导航栏中获得了这个想法
代码使用基本的导航引导
<!--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-->
对于Bootstrap v4检查这个：
https://v4-alpha.getbootstrap.com/components/pagination/#alignment
只能将类添加到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>
