如何将 .btn-group 从 twitter-bootstrap 居中？答案

【问题标题】：How to center .btn-group from twitter-bootstrap?如何将 .btn-group 从 twitter-bootstrap 居中？
【发布时间】：2012-04-08 21:01:04
【问题描述】：

我正在使用twitter-bootstrap，我发现将div 居中相当困难，它具有.btn-group (link) 类。通常，我使用

margin: 0 auto;

或

text-align: center;

在 div 中居中，但当内部元素具有属性 float: left 时不起作用，在这种情况下用于视觉效果。

http://jsfiddle.net/EVmwe/1

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

只需将您的按钮链接声明为inline-block 而不是float:left，您的text-align:center 声明就会起作用，如下所示：

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

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

【讨论】：

【解决方案2】：

已编辑：自 Bootstrap 3 起已更改。请参阅下面的 Bootstrap 3 解决方案。

添加一个包装 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;   
}

将按钮组包装在一个分区中，并将 div 设置为文本居中对齐。按钮组也必须被覆盖以显示 inline-block 和继承的宽度。

正如@Andres Ilich 所说，将锚点显示覆盖为内联块和浮动：无，也可能会起作用。

Bootstrap 3 更新

从 Bootstrap 3 开始，您有对齐类（如 documentation 中所示）。您现在只需将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/

【讨论】：

bootstrap 现在有一个对齐类，可以让您不必创建 btn-group-wrap 类：text-left、text-center 和 text-right。请参阅排版部分中的对齐类getbootstrap.com/css/#type

【解决方案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>

【讨论】：

绝对比接受的答案更干净。无需重写类。
我相信 btn-toolbar 在这里没有必要，以防它混淆任何人。
实际上在我的情况下，有 btn-toolbar 父级导致它无法工作。只有 class="btn-group pagination-centered" 是我的解决方案。

【解决方案4】：

自 Twitter Bootstrap 3 以来，无需任何解决方法。只需为父元素指定text-align: center。

【讨论】：

【解决方案5】：

将text-center 添加到父母对我有用（引导程序 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>

【讨论】：

【解决方案6】：

如果有人也想改变 .btn-group 的宽度，你可以做 min-width 而不是 width。我这样做了：

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 宽度设置为 text-center 的 90%，每个包含的按钮是按钮组的 50%（text-center div 的 45%）。

【讨论】：

【解决方案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;}

这对我有用，没有太大变化。

【讨论】：

【解决方案8】：

我正在使用以下解决方案。

<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>

【讨论】：

【解决方案9】：

将 btn-group 放入 p 标签中并使用 text-align:center 样式作为 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>

【讨论】：

【解决方案10】：

对于引导程序 4

<div class="text-center">
    <div class="btn-group">
        <a href="#" class="btn btn-primary">text 1</a>
        <a href="#" class="btn btn-outline-primary">text 2</a>
    </div>
</div>

【讨论】：

【解决方案11】：

这在 Bootstrap v3.3 中为我解决了问题

.btn-group {
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

【讨论】：

【解决方案12】：

<div class="btn-group mx-auto" role="group">
    <a href="#" class="btn btn-outline-primary"> Button 1</a>
    <a href="#" class="btn btn-outline-primary"> Button 2</a>
</div>

【讨论】：