如何使用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; 
}