Bootstrap .center-block 没有按预期工作

Question

JSFIddle。我想使用 bootstrap 使中心对齐。我只想要两样东西

1) 使 ul 居中对齐

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

我尝试了以下代码

     <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

试试这个：http://jsfiddle.net/DTcHh/3371/

body {
    margin: 10px;
}
.navbar {
    border: 1px solid transparent;

    margin-bottom: 20px;
    min-height: 50px;
    position: relative;
    text-align: center;
    width: 100%;
}
.navbar-nav {
    display: inline-block;
    float: none !important;
    margin: 0;
}
.navbar-right {
    display: inline-block;
    float: none !important;
}
.navbar-collapse.collapse {
  display: inline-block !important;
    float: none !important;
    height: auto !important;
    margin: 0 auto !important;
    overflow: hidden;
    padding: 0;
    text-align: center;
}
.container {
    max-width: 100%;
}
.navbar-header {
    display: inline-block;
    float: left !important;
}

Answer 2

is it not what justified nav does?

还请记住，在使用 .center-block 时，您需要添加 float:none;，因为 bootstrap

中缺少它

使 ul 居中对齐

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

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

注意： 您在 jsfiddle 中缺少 div 行 class

Answer 3

.center-block 仅适用于 div 或具有 定义宽度 的标签。

否则，您必须将 float: none; 添加到 css .center-block{}。

align 或 text-align =center; 也是可能的，但要知道创建 center-block 是为了不这样做。

请注意 bootstrap css 已包含在 class .center-block 中：

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Bootstrap .center-block 没有按预期工作

Bootstrap .center-block not working as expected

html

css

responsive-design

twitter-bootstrap-3