如何从twitter-bootstrap中心.btn-group？

我正在使用twitter-bootstrap ，并且发现很难将具有class .btn-group （ link ）的div .btn-group 。 通常，我使用

 margin: 0 auto; 

要么

 text-align: center; 

以div为中心的内容，但是当内部元素具有属性float: left ，这种情况不起作用。

http://jsfiddle.net/EVmwe/1

Answer 1

编辑：这已经改变Bootstrap 3。请参阅下面的Bootstrap 3的解决scheme。

是不是添加一个包装div的问题？

看看这个例子： http : //jsfiddle.net/EVmwe/4/

代码的重要部分：

 /* a wrapper for the paginatior */ .btn-group-wrap { text-align: center; } div.btn-group { margin: 0 auto; text-align: center; width: inherit; display: inline-block; } a { float: left; } 

包围分区内的button组，并将div设置为文本alignment中心。 button组也必须被覆盖，以显示内联块和inheritance宽度。

@Andres Ilich说，覆盖锚点显示内联块，并浮动：无，也可能工作。

---

Bootstrap更新3

至于Bootstrap 3，你有alignment类（如文档中所见）。 您现在只需将text-center类添加到父级。 像这样：

 <div class="text-center"> <ul class="pagination"> <li class="disabled"><a href="#">&laquo;</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">&raquo;</a></li> </ul> </div> 

在这里看到工作示例： http : //jsfiddle.net/EVmwe/409/

Answer 2

这适用于我（Bootstrap 3）：

 <div class="text-center"> <div class="btn-group"> <a href=1 class="btn btn-small">1</a> <a href=1 class="btn btn-small">2</a> <a href=1 class="btn btn-small">3</a> </div> </div> 

Answer 3

或添加“分页为中心”，例如：

 <div class="btn-toolbar pagination-centered"> <div class="btn-group"> <a href=1 class="btn btn-small">1</a> <a href=1 class="btn btn-small">2</a> <a href=1 class="btn btn-small">3</a> </div> </div> 

Answer 4

只要声明你的button链接为inline-block而不是float:left和你的text-align:center声明就可以工作，就像这样：

 .btn-group a { display:inline-block; } 

演示： http : //jsfiddle.net/EVmwe/3/

Answer 5

由于Twitter的Bootstrap 3没有任何解决方法的需要。 只需指定父元素的text-align: center 。

Answer 6

如果有人也想改变.btn组的宽度，你可以做最小宽度而不是宽度。 我做到了这一点：

HTML：

 <div class="text-center"> <div class="btn-group"> <button class="btn">1</button> <button class="btn">2</button> </div> </div> 

CSS：

 .btn-group {min-width: 90%;} .btn {width: 50%;} 

将btn-group的宽度设置为文本中心的90％，每个包含的button是button组的50％（文本中心div的45％）。

Answer 7

在Bootstrap 3中，你只需要像下面的变化一样简单

  <div class="btn-toolbar"> <div class="btn-group"> <button onclick="#" type="button" class="btn btn-default btn-sm"> Click 1 </button> <button onclick="#" type="button" class="btn btn-default btn-sm"> Click 2 </button> <button onclick="#" class="btn btn-default btn-sm" type="button"> Click 3 </button> <button onclick="#" type="button" class="btn btn-default btn-sm"> Click 4 </button> <button onclick="#" type="button" class="btn btn-default btn-sm"> Click 5 </button> <button onclick="#" type="button" class="btn btn-default btn-sm"> Click 6 </button> </div> </div 

并且修改只有这个的样式（覆盖引导程序）哪个强制浮动左边，以便您不能通过边距或文本中心强制：

 .btn-toolbar .btn-group {float:initial;} 

这适用于我，没有太大的改变。

Answer 8

我正在使用以下解决scheme。

 <div class="center-block" style="max-width:400px"> <a href="#" class="btn btn-success">Accept</a> <a href="#" class="btn btn-danger"> Reject</a> </div> 

Answer 9

将btn-group放在ap标签中，使用text-align：center style for p {}

  p { text-align: center; } <p> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> </p>