Jak ustawić .btn-group z twitter-bootstrap?

Question

Używam twitter-bootstrap i stwierdziłem, że dość trudno jest wyśrodkować div o klasie .btn-group (link). Zwykle używam

margin: 0 auto; 

lub

text-align: center; 

centrum rzeczy wewnątrz div, ale to nie działa, gdy wewnętrzny element ma właściwość float: left która w tym przypadku używa do efektów wizualnych.

http://jsfiddle.net/EVmwe/1

Answer 1

Zmieniano: To się zmieniło, jak of Bootstrap 3. Zobacz rozwiązanie Bootstrap 3 poniżej.

Czy dodajesz zawijanie div z pytania?

Spójrz na ten przykład: http://jsfiddle.net/EVmwe/4/

Ważna część kodu:

/* 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; 
} 

Owijanie grupy przycisków w podziale, i ustawiając div text-align centrum. Grupa przycisków musi również zostać nadpisana, aby wyświetlić blok wbudowany i dziedziczoną szerokość.

Nadpisanie wyświetlania zakotwiczeń do bloku inline i float: none, prawdopodobnie również działałoby, jak powiedział @Andres Ilich.

---

Aktualizacja Bootstrap 3

Od Bootstrap 3, masz zajęcia Wyrównanie (jak widać w documentation). Teraz musisz po prostu dodać klasę text-center do rodzica. Tak:

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

Zobacz przykład pracuje tutaj: http://jsfiddle.net/EVmwe/409/

Answer 2

Wystarczy zadeklarować swoje linki do przycisków inline-block zamiast float:left a deklaracja text-align:center będzie działać, tak jak poniżej:

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

Demo: http://jsfiddle.net/EVmwe/3/

Answer 3

lub dodać "paginacji-centered", przykład:

<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

Od Twitter Bootstrap 3 nie ma potrzeby jakiegokolwiek obejścia. Po prostu określ text-align: center dla elementu nadrzędnego.

Answer 5

Działa to dla mnie (Bootstrap 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

W przypadku gdy ktoś chce również zmienić szerokość .btn grupie, można zrobić min-width zamiast szerokości.Zrobiłem to:

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%;} 

Że ustawić szerokość btn-grupy do 90% tekstu środkowej i każdy zawiera przycisk wynosi 50% przycisk grupa (45% części tekstowej).

Answer 7

W Bootstrap 3, po prostu trzeba zorganizować tak proste, jak następująca zmiana

<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 

i zmienia styl tylko to (nadpisać bootstrap), które zmuszają pływak w lewo tak, że nie można zmusić o marżę lub tekstowym centrum :

.btn-toolbar .btn-group {float:initial;} 

To działa dla mnie, bez większych zmian.

Answer 8

Korzystam z następującego rozwiązania.

<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

Rzuć btn-grupy w tagu ap i używać text-align: center styl 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

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