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

Ale*_*hen 8 css twitter-bootstrap

我有一个由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>
Run Code Online (Sandbox Code Playgroud)

我不知道如何使按钮居中在div中.

dgo*_*sen 23

我不是CSS大师,但这对我来说是诀窍(在span6中居中按钮):

<div class="row">
  <div class="span6" style="text-align:center">
    <button class="btn primary large">
      BLABLABLA
    </button>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

有关居中的更多信息,请点击此处.

  • Bootstrap 3:<div class ="col-md-12"> <div class ="text-center"> xxx </ div> </ div> (4认同)

Zeo*_*rad 20

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

<div class="span6 pagination-centered">
  <button class="btn primary large">
    BLABLABLA
  </button>
</div>
Run Code Online (Sandbox Code Playgroud)


h2o*_*ooo 8

<a>标签怎么样?

如果你有一个<a>标签按钮,那么其他方法将不起作用,因为bootstrap源中a.btn有一个float: left属性.

<div style="text-align: center;">
    <a href="#" class="btn">Button text</a>
</div>
Run Code Online (Sandbox Code Playgroud)

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

解决方案1

添加自定义较少的文件并导入引导程序.

自举custom.less

@import "bootstrap.less";
a.btn {
    float: none !important;
}
Run Code Online (Sandbox Code Playgroud)

然后编译自定义的less文件,或者只是在另一个CSS文件中指定它:

styles.css的

a.btn {
    float: none !important;
}
Run Code Online (Sandbox Code Playgroud)

解决方案2

只需内联使用style="float: none;":

<div style="text-align: center;">
    <a href="#" class="btn" style="float: none;">Button text</a>
</div>
Run Code Online (Sandbox Code Playgroud)