it-swarm.com.de

Wie zentriere ich Knöpfe in Twitter Bootstrap 3?

Ich baue ein Formular in Twitter Bootstrap, habe aber Probleme mit der Zentrierung der Schaltfläche unter der Eingabe im Formular. Ich habe bereits versucht, die center-block-Klasse auf die Schaltfläche anzuwenden, aber das hat nicht funktioniert. Wie soll ich das beheben?

Hier ist mein Code.

<!-- Button -->
<div class="form-group">
    <label class="col-md-4 control-label" for="singlebutton"></label>
    <div class="col-md-4">
        <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
            Next Step!
        </button>
    </div>
</div>
225
Sam Bates

Umschließen Sie den Button in div mit der Klasse "text-center".

Ändern Sie einfach das:

<!-- wrong -->
<div class="col-md-4 center-block">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>

Zu diesem: 

<!-- correct -->
<div class="col-md-4 text-center"> 
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button> 
</div>

Bearbeiten

Ab BootstrapV4 wurde center-block weggelassen # 19102 zugunsten von m-*-auto

506
Shekhar Pankaj

Laut der Dokumentation zu Twitter Bootstrap: http://getbootstrap.com/css/#helper-classes-center

<!-- Button -->
<div class="form-group">
   <label class="col-md-4 control-label" for="singlebutton"></label>
   <div class="col-md-4 center-block">
      <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
          Next Step!
       </button>
   </div>  
</div>

Alles, was die Klasse center-block tut, ist, dem Element einen Rand von 0 auto zu geben, wobei das auto der linke/rechte Rand ist. Es sei denn, die Klasse text-center oder css text-align: center; auf das übergeordnete Element gesetzt ist, kennt das Element den Punkt nicht, von dem aus diese automatische Berechnung ausgeführt wird, und zentriert sich nicht wie erwartet.

Sehen Sie sich hier ein Beispiel für den Code an: https://jsfiddle.net/Seany84/2j9pxt1z/

32
Seany84
<div class="row">
  <div class="col-sm-12">
    <div class="text-center">
      <button class="btn btn-primary" id="singlebutton"> Next Step!</button>
    </div>
  </div>
</div>
29
obe6
<div class=container-fluid">
   <div class="col-sm-12 text-center">
       <button class="btn btn-primary" title="Submit"></button>
       <button class="btn btn-warning" title="Cancel"></button>
   </div>
</div>
8

füge zu deinem Style hinzu:

anzeige: Tabelle; Marge: 0 Auto;

5
benjamin

Ich habe den folgenden Code ausprobiert und er hat für mich funktioniert.

<button class="btn btn-default center-block" type="submit">Button</button>

Das Button-Steuerelement befindet sich in einem div. Durch die Verwendung der center-block-Klasse von Bootstrap konnte ich den Button auf das Zentrum von div ausrichten

Überprüfen Sie den Link, wo Sie die Center-Block-Klasse finden

http://getbootstrap.com/css/#helper-classes-center

5
Swapneel

Sie können dies tun, indem Sie einen Rand angeben oder diese Elemente absolut positionieren.

Zum Beispiel

.button{
  margin:0px auto; //it will center them 
}

0px wird von oben und unten und auto von links und rechts sein.

3
user3443160

Update für Bootstrap 4:

Umschließen Sie die Schaltfläche mit einem div-Satz mit den Dienstprogrammklassen 'd-flex' und 'justify-content-center', um die Flexbox zu nutzen.

<!-- Button -->
<div class="form-group">
  <div class="d-flex justify-content-center">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">
      Next Step!
    </button>
  </div>
</div>

Der Vorteil der Verwendung von Flexbox besteht darin, zusätzliche Elemente/Schaltflächen auf derselben Achse hinzufügen zu können, jedoch mit einer separaten Ausrichtung. Es eröffnet auch die Möglichkeit der vertikalen Ausrichtung mit den Klassen 'align-items-start/center/end'.

Sie können das Label und die Schaltfläche mit einem anderen div umschließen, damit sie aufeinander ausgerichtet bleiben.

z.B. https://codepen.io/anon/pen/BJoeRY?editors=1000

2
Chris

verwenden Sie text-align: center css -Eigenschaft

2
rsudip90

Es funktioniert für mich, versuche, einen unabhängigen <div> Zu erstellen und füge dann den button hinzu. genau wie dieser :

<div id="contactBtn">
            <button type="submit" class="btn btn-primary ">Send</button>
</div>

Gehen Sie dann zu Ihrer CSSStyle-Seite und führen Sie den Text-align:center Folgendermaßen aus:

#contactBtn{text-align: center;}
1

Sie können folgendes tun. Außerdem werden überlappende Tasten vermieden.

<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

Ich hatte dieses Problem. ich benutzte

<div class = "col-xs-8 text-center">

In meinem div, das ein paar h3-Zeilen, ein paar h4-Zeilen und einen Bootstrap-Button enthielt, sprang alles außer dem Button in die Mitte, nachdem ich Text-Center verwendet hatte. Also ging ich in mein CSS-Sheet, das Bootstrap überschreibt, und gab dem Button einen

margin: auto;

das scheint das Problem gelöst zu haben.

Dies ist mein erster Beitrag hier und ich hoffe es hilft!

0
Ado Moshe

Für Bootstrap 3

wir teilen den Raum mit den Spalten, wir verwenden 8 kleine Spalten (col-xs-8), lassen 4 leere Spalten (col-xs-offset-4) und übernehmen die Eigenschaft (Mittelblock)

<!--Footer-->
<div class="modal-footer">
  <div class="col-xs-8 col-xs-offset-4 center-block">
    <button type="submit" class="btn btn-primary">Enviar</button>
    <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
    </div>
</div>

Für Bootstrap 4

Wir verwenden Spacing, Bootstrap enthält eine Vielzahl von abgekürzten und aufgefüllten Antwortrand-Dienstklassen, um das Erscheinungsbild eines Elements zu ändern .. Die Klassen werden mit dem Format {property} {pages} - {size} für xs und {property benannt } {sides} - {breakpoint} - {size} für sm, md, lg und xl.

weitere Informationen hier: https://getbootstrap.com/docs/4.1/utilities/spacing/

<!--Footer-->
<div class="modal-footer">
  <button type="submit" class="btn btn-primary ml-auto">Enviar</button>
  <button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>
0
Gonen09