Question

我正在使用twitter-bootstrap，我发现以div（link}为中心的.btn-group相当困难。通常，我使用

margin: 0 auto;

或

text-align: center;

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

http://jsfiddle.net/EVmwe/1

Answer 1

已编辑：自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设置为文本对齐中心。还必须覆盖按钮组以显示内联块和继承宽度。

将锚点显示覆盖为内联块，而float：none也可能会起作用，正如@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/

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

for bootstrap 4

git diff-index --quiet HEAD || git commit -am 'Jolly ol commit message'

Answer 5

只需将您的按钮链接声明为inline-block而不是float:left，您的text-align:center声明即可生效，如下所示：

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

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

Answer 6

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

Answer 7

如果有人也想改变.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宽度设置为文本中心的90％，每个包含按钮为按钮组的50％（文本中心div的45％）。

Answer 8

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

Answer 9

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

将btn-group扔在p标签中，并使用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>

Answer 11

这在Bootstrap v3.3中帮了我大忙

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

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

11 个答案: