4

在使用 Bootstap 进行水平中心对齐时,我可以选择一些选项。

我可以使用offset类或使用空白span类作为占位符。另一种选择可以使用自定义对齐方式,如下所示

.center {
    float: none;
    margin: 0 auto;
}

这些选项都不能解决我的问题,因为 div 容器的内容必须填充 100% 的宽度。

假设我有以下

<div class="container-fluid">
    <div class="row-fluid">
      <div class="span4 offset4">
        <button class="btn">1-1</button>
        <button class="btn">1-2</button>
      </div>
    </div>
</div>

如果按钮没有填满 的整个 div 空间span4,我将无法获得真正的中心对齐。也许,我可以将内容拉伸到 100%,但我不知道这是否是一个好的做法。

在这里,我有一个画布可以玩。JS斌

4

2 回答 2

7

由于您有内联元素,您可以只使用.text-center跨度上的类,而且您可能最好使用偏移量而不是空元素:

HTML

<div class="row-fluid">
  <div class="span4 offset4 text-center">
    <button class="btn">1-1</button>
    <button class="btn">1-2</button>
  </div>
</div>

更新演示:http: //jsbin.com/ayuFEhO/2/edit

于 2013-09-25T00:02:53.220 回答
2

你不需要添加一个新类,如果你想水平对齐这个按钮,只需使用.text-center这里是一个 bin http://jsbin.com/UVeGejO/1/edit

Obs:text-center类已经存在于 Twitter 的引导代码中。

于 2013-09-25T00:04:02.710 回答