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

Question

我使用twitter-bootstrap，我發現它很難以div爲中心，它的類別爲.btn-group（link）。 通常情況下，我用

margin: 0 auto; 

或

text-align: center; 

到格中居中的東西，但是當內部部件具有財產float: left在這種情況下使用了視覺效果這是行不通的。

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來文本對齊中心。按鈕組也必須被覆蓋，以具有顯示內聯塊和繼承寬度。 @Andres Ilich說，覆蓋錨點顯示爲內聯塊，而float：none也可能工作，如@Andres Ilich所說。自舉3

---

更新自舉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

只是聲明按鈕鏈接作爲inline-block，而不是float:left和你text-align:center聲明將工作，像這樣：

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

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

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

由於Twitter的引導3，不需要任何解決方法。只需爲父元素指定text-align: center即可。

Answer 5

這對我的作品（引導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 6

如果有人也想改變.btn組的寬度，你可以做的最小寬度，而不是寬度。我這樣做：

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-組寬度文本中心的90％，並且每個包括按鈕是按鈕的50％組（文本中心div的45％）。

Answer 7

在引導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 8

我正在使用以下解決方案。

<div class="center-block" style="max-width:400px"> 
    <a href="#" class="btn btn-success">Accept</a> 
    <a href="#" class="btn btn-danger"> Reject</a> 
</div> 

Answer 9

投擲的BTN-組中AP標記和使用的text-align：中心風格對於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 10

自舉4

<div class="text-center"> 
    <div class="btn-group"> 
     <a href="#" class="btn btn-primary">text 1</a> 
     <a href="#" class="btn btn-outline-primary">text 2</a> 
    </div> 
</div>