如何使用bootstrap将按钮集中置于div 3(How to center set of buttons into div with bootstrap 3)

如何使用bootstrap将按钮集中置于div 3(How to center set of buttons into div with bootstrap 3)

我需要将一组按钮水平居中到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>

I need to center horizontally a set of buttons into div.

My problem is that the buttons continues left aligned.

//css

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

here is my markup:

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

最满意答案

问题是btn-toolbar中使用的bootstrap中的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> 
  
 
The issue is that btn in bootstrap used inside btn-toolbar are floated 
 
 
so you may add this code :
 
 
 
  
  
.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>