Twitter Bootstrap：中心丸
我的问题是你如何能中心药片？
我试图添加中心块，也改变float:left float:center但没有任何帮助。
这变得更简单了！ 您只需使用容器上的text-center类，然后将display:inline-block应用于ul 。 只要确保您有一个换行符或段落标记将nav与其他任何元素分隔开来。
完成！ 2类增加，1行的CSS（不要修改引导的CSS文件！）。
HTML：
<div class="col-md-12 text-center"> <p>Copyright stuff</p> <ul class="nav nav-pills center-pills"> <li><a href="#">Footer nav link</a></li> <li><a href="#">Footer nav link</a></li> </ul> </div>
CSS：
.center-pills { display: inline-block; }
编辑2015 ：正如Artur Beljajev所提到的，Flexbox的支持现在已经足够普遍 ，您可能想要使用它：
.center-pills { display: flex; justify-content: center; }
如果你想在一个可变宽度的容器中使用可变宽度的药丸，我build议使用inline-block显示types并向药丸容器添加一个类。
这是我如何扩大引导为定心丸。
CSS：
.centered-pills { text-align:center; } .centered-pills ul.nav-pills { display:inline-block; } .centered-pills li { display:inline; } .centered-pills a { float:left; } * html .centered-pills ul.nav-pills { display:inline; } /* IE6 */ *+html .centered-pills ul.nav-pills { display:inline; } /* IE7 */
HTML：
<div class="row"> <div class="span12 centered-pills"> <ul class="nav nav-pills"> <li><a href="#">derek</a></li> <li><a href="#">brooks</a></li> <li><a href="#">is</a></li> <li><a href="#">super</a></li> <li class="active"><a href="#">awesome</a></li> </ul> </div> </div>
或者flexbox方法：
.nav-pills { display: flex; justify-content: center; }
如果你想要药片居中，而不是左alignment，你将需要改变CSS。 您将需要指定宽度并将边距更改为自动。
例如：
.tabs, .pills { margin: 0 auto; padding: 0; width: 400px; }
虽然@minaz的答案适用于已知宽度的列表，但是我会build议一个不同的解决scheme，即使您更改列表的内容，它也能正常工作：
.tabs, .pills { text-align: center; } .tabs li, .pills li { float: none; }
或者在SCSS：
.tabs, .pills { text-align: center; li { float: none; } }
这将使列表中的文本居中，并重置列表项的float属性，使其受到text-align属性的影响。
