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

【问题标题】：Bootstrap .center-block not working as expectedBootstrap .center-block 没有按预期工作
【发布时间】：2015-03-17 08:01:10
【问题描述】：

JSFIddle。我想使用引导程序使中心对齐。我只想要两件事

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>

【问题讨论】：

分享你的 jsfiddle 代码。
@user4429928 JSFIddle 已附加。
也许这会有所帮助stackoverflow.com/questions/17905019/…
@pevoje 我不想添加任何额外的 CSS（特别是媒体查询）。我只想要一个纯 Bootstrap 技术。
使ul中心对齐是什么意思？

标签： html css twitter-bootstrap-3 responsive-design

【解决方案1】：

is it not what justified nav does?

还请记住，在使用 .center-block 时，您需要添加 float:none;，因为它在引导程序中缺失

使ul居中对齐

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

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

注意：您的 jsfiddle 中缺少一个用于行类的 div

【讨论】：

.nav-justified 如何帮助居中对齐ul？
在源代码中检查它的代码，它会帮助你。还更新了我的答案
在文档中列出了 >Justified navbar nav 链接当前不受支持。如果我错了，你能想出 JSFIdle 的例子吗？
你没有错，消息来源说。但是，如果我的问题正确，您只需要删除边框，不要让它看起来像标签。
不.. 我希望ul 成为.center-blocked。

【解决方案2】：

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

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

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

请注意，bootstrap css 已在 .center-block 类中包含以下内容：

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

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

【讨论】：

【解决方案3】：

试试这个：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;
}

【讨论】：