如何在bootstrap的跨度中居中一个宽度未知按钮？

Question

我有一个由backbone.js和jQuery.tmpl（）生成的按钮，按钮的宽度是变体。我想把它放在span6 div中。代码如下所示：

<div class="row">
  <div class="span6">
    <button class="btn primary large">
      BLABLABLA
    </button>
  </div>
  <div class="span10">
    ...
  </div>
</div>

我不知道如何让按钮居中于div。

Answer 1

我不是CSS大师，但这对我来说很有把握（在span6中居中按钮）：

<div class="row">
  <div class="span6" style="text-align:center">
    <button class="btn primary large">
      BLABLABLA
    </button>
  </div>
</div>

有关居中can be found here的更多信息。

Answer 2

有点晚了，但你可以使用bootstrap中的以分页为中心的类

<div class="span6 pagination-centered">
  <button class="btn primary large">
    BLABLABLA
  </button>
</div>

Answer 3

<a>标签怎么样？

如果您有<a>标记按钮，那么其他方法将无效，因为a.btn在引导程序源中具有float: left属性。

<div style="text-align: center;">
    <a href="#" class="btn">Button text</a>
</div>

这可以通过两种方式解决。

解决方案1 ​​

添加自定义文件并导入引导程序。

<强>自举-custom.less

@import "bootstrap.less";
a.btn {
    float: none !important;
}

然后编译自定义的较少文件，或者只是在另一个CSS文件中指定它：

<强> styles.css的

a.btn {
    float: none !important;
}

解决方案2

使用style="float: none;"：

进行内联

<div style="text-align: center;">
    <a href="#" class="btn" style="float: none;">Button text</a>
</div>

Answer 4

其他解决方案

<div class="row-fluid pagination-centered">
<a href="#" class="btn btn-large">Button</a>
    </div>
<div class="clearfix"></div>

Answer 5

我有同样的问题，我把它包裹在

中

<a class="btn btn-primary" href="#" role="button">Text Here</a>

成了

<div class="text-center">
<a class="btn btn-primary" href="#" role="button">Text Here</a>
</div>