wake-up-neo.com

Wie kann ich die .btn-group von Twitter-bootstrap aus zentrieren?

Ich benutze Twitter-bootstrap , und ich fand es ziemlich schwierig, div zu zentrieren, das die Klasse .btn-group ( link ) hat. Normalerweise verwende ich 

margin: 0 auto;

oder

text-align: center;

sachen innerhalb von div zentrieren, aber es funktioniert nicht, wenn inneres Element die Eigenschaft float: left hat, die in diesem Fall für visuelle Effekte verwendet wird.

http://jsfiddle.net/EVmwe/1

htmlcsscss3twitter-bootstrap
68
evfwcqcg

Bearbeitet: Dies hat sich seit Bootstrap 3 geändert. Siehe Lösung für Bootstrap 3 unten.

Fügt das Hinzufügen eines Wrapping-Div nicht in Frage?

Sehen Sie sich dieses Beispiel an: http://jsfiddle.net/EVmwe/4/

Wichtiger Teil des Codes:

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

Umschließen der Schaltflächengruppe innerhalb einer Division und Festlegen des div auf Textausrichtungszentrums. Die Schaltflächengruppe muss auch überschrieben werden, um Inline-Block und vererbte Breite anzuzeigen. 

Das Überschreiben der Ankeranzeige in Inline-Block und Float: None würde wahrscheinlich auch funktionieren, wie @Andres Ilich sagte. 

Update für Bootstrap 3

Seit Bootstrap 3 gibt es Ausrichtungsklassen (wie in der Dokumentation ). Sie müssen jetzt einfach die text-center-Klasse einem übergeordneten Element hinzufügen. So wie:

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

Siehe Arbeitsbeispiel hier: http://jsfiddle.net/EVmwe/409/

73
mikaelb

Das funktioniert für mich (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>
73
Alberto Gaona

oder fügen Sie "paginierungszentriert" hinzu, Beispiel:

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

für 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>
6
Vasil Valchev

Seit Twitter Bootstrap 3 ist keine Problemumgehung erforderlich. Geben Sie einfach den text-align: center für das übergeordnete Element an.

6
Tim

Deklarieren Sie einfach Ihre Button-Links als inline-block anstelle von float:left und Ihre text-align:center-Deklaration funktioniert wie folgt:

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

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

6
Andres Ilich

Wenn auch jemand die Breite der .btn-Gruppe ändern möchte, können Sie statt der Breite nur die Breite der Breite verwenden. Ich tat dies:

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

Damit wird die Breite der BTN-Gruppe auf 90% des Textzentrums festgelegt, und jede enthaltene Schaltfläche macht 50% der Tastengruppe aus (45% des Textzentrumsdivits).

4
Nagra
<div class="btn-group mx-auto" role="group">
    <a href="#" class="btn btn-outline-primary"> Button 1</a>
    <a href="#" class="btn btn-outline-primary"> Button 2</a>
</div>
1
Diego

Ich verwende die folgende Lösung. 

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

Wirf die btn-Gruppe in ein p-Tag und benutze text-align: center style für 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>
0
Jake Wolfe

In Bootstrap 3 müssen Sie nur so einfach strukturieren wie die folgenden Änderungen

    <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

Und ändern Sie den Stil nur um diesen (überschreiben Sie den Bootstrap).

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

Das funktioniert für mich, ohne viel zu ändern.

0
Osify

Dies hat mir in Bootstrap v3.3 den Trick gebracht

.btn-group {
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
0
jetpackdata.com