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

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内引导使用btn-toolbar漂浮

所以你可能加这个代码：

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

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

Answer 2

添加文本中心级的按钮容器。

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

Answer 3

有一个在代码中没有大的问题，你必须改变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; 
}