Wie richte ich diese Bootstrap-Formularelemente aus?

Ich benutze Bootstrap zum ersten Mal, und habe eine Menge Probleme beim Ausrichten dieser Form - horizontal nach links.Wie richte ich diese Bootstrap-Formularelemente aus?

Die Liste Elemente sind horizontal, wie sie sein sollten, aber ich möchte, dass die Steuerelement-Beschriftungen (die Bootstrap-Klasse für Formularbeschriftungen) alle an der gleichen Position schwebte links.

Das Formular ist in einem Div mit einer Spanne von 7 enthalten, da meine Website zwei Spalten ist - 7 und 4 Spalten.

Unten ist mein HTML. Wenn Sie unter "Horizontale Formulare" auf dieser Seite http://accounts.tao.tw.shuttle.com/examples_bootstrap/basecss/forms suchen, sehen Sie, dass die Beschriftungen linksbündig ausgerichtet sind, aber nicht absolut linksbündig, so dass der Anfang der Beschriftungen vertikal an derselben Position liegt.

<form class="form-horizontal"> 
    <div class="control-group"> 
     <label class="control-label" for="inputSaving">What are you saving for?</label> 
     <div class="controls"> 
      <input class="span4" type="text" id="inputSaving" placeholder="e.g. Swimming Lessons, Birthday Party, College Fund, etc."> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="description">Add a short description</label> 
     <div class="controls"> 
      <textarea class="span4" rows="4" placeholder="Describe in your own words the saving goal for this piggybank"></textarea> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="categoryselect">Choose a Category</label> 
     <div class="controls"> 
      <select class="span4"> 
       <!-- Add some CSS and JS to make a placeholder value--> 
       <option value="Kittens">Kittens</option> 
       <option value="Keyboard Cat">Keyboard Cat</option> 
       <option value="Twitter Bird">Twitter Bird</option> 
      </select> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="goal">Your Saving Goal</label> 
     <div class="controls"> 
      <input type="text" class="span4" id="goal"> 
     </div> 
    </div> 
    <button class="btn btn-large btn-primary" type="button">Submit</button> 
</form>

Quelle

2013-01-10 Tom Maxwell

Warum wird keine Antwort für diese Frage als richtig markiert? –

Wenn Sie sagen, dass Ihr Problem ist, wie die Form Etiketten nach links ausrichten, sehen, ob das hilft:
http://jsfiddle.net/panchroma/8gYPQ/

Versuchen Sie, den text-align links/rechts in der

CSS Ändern

.form-horizontal .control-label{ 
/* text-align:right; */ 
text-align:left; 
background-color:#ffa; 
}

Viel Glück!

Quelle

2013-01-11 03:01:29

Das HTML aktualisiert und die Ausrichtung der Schaltfläche "Senden" korrigiert: http://jsfiddle.net/n3f25Lkd/ – ganders

Ich würde nicht empfehlen, den Quellcode eines Frameworks direkt zu ändern, vor allem, wenn Sie in der Lage sein möchten, ihn auf dem neuesten Stand zu halten - Das heißt, es sei denn, Sie sind bereit, das Repository zu verzweigen und den Upstream-Code wieder einzufügen. – djule5

stimmten zu, dass es keine großartige Idee ist, einen Frameworks-Quellcode @ djule5 zu ändern, was ich vorgeschlagen habe, das Obige dem CSS der Site hinzuzufügen, so dass es den Bootstrap-Stil außer Kraft setzt. Dann können Sie Bootstrap aktualisieren und die Anpassung nicht verlieren, macht das Sinn? –

Anstatt die ursprüngliche Bootstrap-CSS-Klasse zu ändern, erstellen Sie eine neue CSS-Datei, die den Standardstil überschreibt.

Stellen Sie sicher, dass Sie die neue CSS-Datei nach dem Einschließen der bootstrap.css-Datei enthalten.

In der neuen CSS-Datei tun

.form-horizontal .control-label{ 
    text-align:left !important; 
}

Quelle

2014-12-17 20:32:54

Ich würde empfehlen, nie zu verwenden, wichtig, wenn es eine Alternative gibt: http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css – cederlof

Bitte verwenden Sie die Lösung von Tim B. James unten. wichtig! ist eine schlechte Praxis –

„Pull-links“ ist, was Sie brauchen, es sieht aus wie Sie Bootstrap 2 verwenden, ich bin nicht sicher, ob das zur Verfügung steht, Bootstrap 3 betrachten, es sei denn, Natürlich ist es eine große Überarbeitung! ... für Bootstrap 3, aber Sie müssen sicherstellen, dass Sie auch 12 Spalten in jeder Zeile haben, sonst werden Sie Probleme haben.

Quelle

2015-03-04 15:59:20 SupportLocusDev

"aber Sie müssen sicherstellen, dass Sie auch 12 Spalten in jeder Zeile haben, sonst werden Sie Probleme haben" - nicht wahr. Wenn Sie weniger als 12 Spalten definiert haben, verwenden Ihre Daten nur die von Ihnen definierten Spalten. Die restlichen Spalten sind dann leer. Also, wenn Sie ein col-x-4, col-x-5, col-x-1 definieren, dann sind die restlichen 2 Spalten leer, und alles sollte gut funktionieren. (Beachten Sie, wenn Sie MEHR als 12 Spalten definieren, dann wird alles nach der 12. Spalte in die nächste Zeile umbrochen) – ganders

Nur meine zwei Cent. Wenn Sie Bootstrap 3 verwenden, würde ich einfach einen zusätzlichen Stil in das Stylesheet Ihrer eigenen Website einfügen, der den text-left Stil der control-label steuert.

Wenn Sie der Beschriftung text-left hinzufügen, gibt es standardmäßig einen anderen Stil, der diese .form-horizontal .control-label überschreibt. Also, wenn Sie hinzufügen:

.form-horizontal .control-label.text-left{ 
    text-align: left; 
}

Dann baute die in text-left Stil korrekt auf das Etikett aufgebracht wird.

Quelle

2015-05-21 10:29:16

die richtige Antwort –

oder würden Sie sagen, die "linke" Antwort ... haha –

-1

Ich hatte genau das gleiche Problem. Ich habe das Problem in bootstrap.min.css gefunden. Sie müssen das Etikett ändern: label {display:inline-block;} zu label {display:block;}

Quelle

2016-04-22 15:32:59

Nur style="text-align: left" zu Ihrem Label hinzufügen.

Quelle

2017-05-03 15:19:25

Wie richte ich diese Bootstrap-Formularelemente aus?

Antwort

Verwandte Themen