wake-up-neo.net

Mittlere Taste unter dem Formular in Bootstrap

ich habe einige Probleme mit Bootstrap. Ich habe das Formular und die Schaltfläche mit span6 offset3 zentriert und weiß jetzt nicht, wie die Schaltfläche unter diesem Formular zentriert werden soll. Ich habe es mit text-align: center versucht, aber es ist immer noch mehr auf der linken Seite.

<div class="container">
    <div class="row">
        <div class="span6 offset3">
            <form>
                <input class="input-xxlarge" type="text" placeholder="Email..">
                <p style="line-height: 70px; text-align: center;"><button type="submit" class="btn">Confirm</button></p>
            </form>
        </div>
    </div>
</div>

htmlcssbuttontwitter-bootstrapcenter
11
Fastkowy

Entfernen Sie das <p>-Tag und fügen Sie die Schaltfläche in einen <div class="form-actions">-Code ein:

<div class="form-actions">
    <button type="submit" class="btn">Confirm</button>
</div>

dann erweitern Sie die CSS-Klasse mit:

.form-actions {
    margin: 0;
    background-color: transparent;
    text-align: center;
}

Hier ist eine JS Bin-Demo: http://jsbin.com/ijozof/2

Suchen Sie nach form-actions im Bootstrap-Dokument hier:

http://Twitter.github.io/bootstrap/base-css.html#buttons

22
Leniel Maccaferri

Mit Bootstrap 3 können Sie das Stilattribut 'Textzentrum' verwenden.

<div class="col-md-3 text-center"> 
  <button id="button" name="button" class="btn btn-primary">Press Me!</button> 
</div>
12
Karl Gjertsen

Versuchen Sie, diese Klasse hinzuzufügen 

class="pager"

<p class="pager" style="line-height: 70px;">
    <button type="submit" class="btn">Confirm</button>
</p>

Ich habe meinen in einem <div class=pager><button etc etc></div> ausprobiert, was gut funktioniert hat

Siehe http://getbootstrap.com/components/ unter Pagination -> Pager

Dies sieht aus wie die richtige Bootstrap-Klasse, um dies zu zentrieren, text-align: center; ist für Text gedacht, nicht für Bilder und Blöcke usw. 

1
user3257693

Ich mache es so <center></center>

<div class="form-actions">
            <center>
                    <button type="submit" class="submit btn btn-primary ">
                        Sign In <i class="icon-angle-right"></i>
                    </button>
            </center>
</div>
1
Moncho Chavez

Width:100% und text-align:center würden nach meiner Erfahrung funktionieren

<p style="display:block; line-height: 70px; width:100%; text-align:center; margin:0 auto;"><button type="submit" class="btn">Confirm</button></p>
1
Kevin Lynch

Bei Verwendung von Bootstrap ist die korrekte Verwendung der Offsetklasse die richtige. Verwenden Sie Mathematik, um den linken Versatz zu bestimmen. Beispiel: Sie möchten, dass auf dem Handy eine Taste in voller Breite, aber 1/3 Breite und auf Tablets, Desktops und großen Desktops zentriert ist.

Von den 12 "Bootstrap" -Spalten verwenden Sie 4 zum Versetzen, 4 für die Schaltfläche und dann ist 4 nach rechts leer.

Sehen Sie, ob das funktioniert!

0
Mitch McCoy

Es funktioniert vollständig, probiere es aus:

<div class="button pull-left" style="padding-left:40%;" >
0
chitra

Wenn Sie Bootstrap 4 verwenden, versuchen Sie Folgendes:

<div class="mx-auto text-center">
    <button id="button" name="button" class="btn btn-primary">Press Me!</button>
</div>
0
Reeya Grace

Mit Bootstrap können Sie einfach die Klasse text-center verwenden:

<div class="container">
    <div class="row">
        <form>
            <input class="input-xxlarge" type="text" placeholder="Email..">
        </form>

        <div class="text-center">
            <button type="submit" class="btn">Confirm</button>
        </div>
    </div>
</div>

DEMO

0
Legionar