如何使用bootstrap 3将按钮集中到div中

Question

我需要将一组按钮水平居中到div。

我的问题是按钮继续左对齐。

// CSS

.space-btn{
    margin-bottom:5px!important;
}

这是我的标记：

<div class="row">
     <div class="col-sm-12">
          <div class="panel panel-default">
            <div class="panel-body">
                <div class="text-center">
                   <div class="btn-toolbar">
                      <button class="btn btn-primary space-btn" type="button">Histórico</button>
                      <button class="btn btn-primary space-btn" type="button">Reagendar</button>
                      <button class="btn btn-primary space-btn" type="button">Detalhes</button>
                   </div>
              </div>
           </div>
        </div>
     </div>
</div>

Answer 1

问题是btn-toolbar内使用的bootstrap中的btn是浮动的

所以你可以添加这段代码：

＆＃13;

＆＃13;

.space-btn {
  float: none!important;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
  <div class="col-sm-12">
    <div class="panel panel-default">
      <div class="panel-body">
        <div class="btn-toolbar text-center">
          <button class="btn btn-primary space-btn" type="button">Histórico</button>
          <button class="btn btn-primary space-btn" type="button">Reagendar</button>
          <button class="btn btn-primary space-btn" type="button">Detalhes</button>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

代码中没有大问题需要更改text-center类的位置。这将是这样的。

<div class="row">
     <div class="col-sm-12">
          <div class="panel panel-default">
            <div class="panel-body">
                   <div class="btn-toolbar text-center">
                      <button class="btn btn-primary space-btn" type="button">Histórico</button>
                      <button class="btn btn-primary space-btn" type="button">Reagendar</button>
                      <button class="btn btn-primary space-btn" type="button">Detalhes</button>
                   </div>
              </div>
            </div>
        </div>
     </div>

css中也有一个小变化

.space-btn{
  float:none!important;
}

Answer 3

将文本中心类添加到按钮容器中。

<div class="row">
     <div class="col-sm-12">
          <div class="panel panel-default">
            <div class="panel-body">
                   <div class="btn-toolbar text-center">
                      <button class="btn btn-primary space-btn" type="button">Histórico</button>
                      <button class="btn btn-primary space-btn" type="button">Reagendar</button>
                      <button class="btn btn-primary space-btn" type="button">Detalhes</button>
                   </div>
           </div>
        </div>
     </div>
</div>