Twitter Bootstrap:中心药丸

Question

我的问题是如何将药片集中在一起？

我试着周围添加中心街区,也改变float:left到float:center,但没有什么帮助.

Answer 1

这变得更简单了!你只需要使用text-center的容器类,并应用display:inline-block到ul.只需确保您有一个换行符或段落标记,将导航与容器中的任何其他元素分开.

完成!2个类添加,1行CSS(不要修改bootstrap 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;
}

Answer 2

如果你想在可变宽度容器中使用可变宽度药丸,我建议使用inline-block显示类型并在药丸容器中添加一个类.

以下是我如何扩展自举中心药丸的方法.

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>

Answer 3

或者是flexbox方法:

.nav-pills {
    display: flex;
    justify-content: center;
}

Answer 4

如果你想让药丸居中而不是左对齐,你需要改变css.您需要指定宽度并将边距更改为自动.

例如:

.tabs, .pills {
    margin: 0 auto;
    padding: 0;
    width: 400px;
}