Bootstrap .center-block无法按预期工作

Question

JSFIddle.我想使用bootstrap使中心对齐.我只想要2件事

1)使ul中心对齐

2)ul的width 不应该是这样20%或类似的东西.我希望它是width: auto;因为lis的数量是动态的.

我试过以下代码

     <div class="col-xs-12 col-md-8">

        <div class="center-block">
            <ul class="nav nav-pills">
                <li class="active"><a class="link-text-bright-blue" href="#2015-14" data-toggle="tab" aria-expanded="false"><h5>2015 &amp; 2014</h5></a></li>
                <li class=""><a class="link-text-bright-blue" href="#2013" data-toggle="tab" aria-expanded="false"><h5>2013</h5></a></li>
                <li class=""><a class="link-text-bright-blue" href="#2012" data-toggle="tab" aria-expanded="false"><h5>2012</h5></a></li>
                <li class=""><a class="link-text-bright-blue" href="#2011" data-toggle="tab" aria-expanded="false"><h5>2011</h5></a></li>
                <li class=""><a class="link-text-bright-blue" href="#2006-2010" data-toggle="tab" aria-expanded="false"><h5>2006 - 2010</h5></a></li>
            </ul>
        </div>

        <div>
          ... Other div
        </div>

     </div>

Answer 1

这不是导航的合理性吗？

还要记住,在使用.center-block时需要添加,float:none;因为它在bootstrap中缺失

使ul中心对齐

.center-block {
  display: table;
  margin: 0 auto;
}

http://jsfiddle.net/DTcHh/3384/

注意:您在jsfiddle中缺少行类的div