css - 如何在引导程序的跨度中居中宽度未知按钮？

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>

更多关于居中的信息可以在这里找到。

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>

这可以通过 2 种方式撤消。

解决方案 1

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

引导-custom.less

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

然后编译您的自定义 less 文件，或者简单地在另一个 CSS 文件中指定它：

样式.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>