Erneut aktualisieren: Ich schließe diese Frage, indem ich die oberste Antwort auswähle, um zu verhindern, dass Personen Antworten hinzufügen, ohne die Frage wirklich zu verstehen. In der Realität gibt es keine Möglichkeit, dies mit der eingebauten Funktionalität zu tun, ohne ein Raster zu verwenden oder zusätzliches CSS hinzuzufügen. Raster funktionieren nicht gut, wenn Sie mit help-block
Elementen arbeiten, die beispielsweise über eine kurze Eingabe hinausgehen müssen, aber "eingebaut" sind. Wenn dies ein Problem ist, empfehle ich die Verwendung zusätzlicher CSS-Klassen, die Sie in der BS3-Diskussion hier finden . Jetzt, da BS4 nicht mehr verfügbar ist, können die enthaltenen Größenstile verwendet werden, um dies zu verwalten, sodass dies nicht mehr lange relevant sein wird. Vielen Dank an alle für die guten Beiträge zu dieser beliebten SO-Frage.
Update: Diese Frage bleibt offen, da es um die in BS integrierte Funktionalität zum Verwalten der Eingabebreite geht, ohne auf das Raster zurückzugreifen (manchmal müssen sie unabhängig verwaltet werden). Ich verwende bereits benutzerdefinierte Klassen, um dies zu verwalten, daher ist dies keine Anleitung für grundlegende CSS. Die Aufgabe befindet sich in der BS- Feature-Diskussionsliste und muss noch behandelt werden.
Ursprüngliche Frage: Hat jemand eine Möglichkeit gefunden, die Eingabebreite in BS 3 zu verwalten? Ich verwende derzeit einige benutzerdefinierte Klassen, um diese Funktionalität hinzuzufügen, habe jedoch möglicherweise einige nicht dokumentierte Optionen übersehen.
Aktuelle Dokumente sagen, dass .col-lg-x verwendet werden soll, aber das funktioniert eindeutig nicht, da es nur auf das Container-Div angewendet werden kann, was dann alle Arten von Layout- / Float-Problemen verursacht.
Hier ist eine Geige. Seltsam ist, dass ich auf der Geige nicht einmal die Formgruppe dazu bringen kann, die Größe zu ändern.
<form role="form" class="row">
<div class="form-group col-lg-1">
<label for="code">Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-lg-1 ">
<label for="code">Email</label>
<input type="text" class="form-control input-normal">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
quelle
Antworten:
Was Sie tun möchten, ist sicherlich erreichbar.
Was Sie wollen, ist, jede 'Gruppe' in eine Reihe zu packen, nicht das gesamte Formular mit nur einer Reihe. Hier:
Die NEUE jsfiddle, die ich gemacht habe: NEUE jsfiddle
Beachten Sie, dass ich in der neuen Geige auch 'col-xs-5' hinzugefügt habe, damit Sie es auch auf kleineren Bildschirmen sehen können - das Entfernen macht keinen Unterschied. Denken Sie jedoch daran, dass Sie in Ihren ursprünglichen Klassen nur 'col-lg-1' verwenden. Das heißt, wenn die Bildschirmbreite kleiner als die Größe der 'lg'-Medienabfrage ist, wird das Standardblockverhalten verwendet. Grundsätzlich gilt: Wenn Sie nur 'col-lg-1' anwenden, verwenden Sie folgende Logik:
Weitere Informationen finden Sie unter Bootstrap 3-Rastersystem . Ich hoffe, es war mir klar, sonst lass es mich wissen und ich würde es näher erläutern.
quelle
In Bootstrap 3
Sie können einfach einen benutzerdefinierten Stil erstellen:
Fügen Sie es dann zu folgenden Steuerelementen hinzu:
Auf diese Weise müssen Sie kein zusätzliches Markup für das Layout in Ihr HTML einfügen.
quelle
ASP.net MVC gehen Sie zu Content-Site.css und entfernen oder kommentieren Sie diese Zeile:
quelle
Ich denke, Sie müssen die Eingaben in ein
col-lg-4
und dann in dasform-group
und alles wird in einem eingeschlossenform-horizontal
.Demo auf Bootply - http://bootply.com/78156
BEARBEITEN: Aus den Bootstrap 3-Dokumenten.
Eine weitere Option ist das Festlegen einer bestimmten Breite mithilfe von CSS:
Oder wenden Sie das
col-sm-*
auf die Formulargruppe an.quelle
Aktuelle Dokumente sagen, dass .col-xs-x verwendet werden soll, kein lg. Dann versuche ich es in Geige und es scheint zu funktionieren:
http://jsfiddle.net/tX3ae/225/
Um das Layout beizubehalten, können Sie möglicherweise ändern, wo Sie die Klasse "Zeile" wie folgt platzieren:
http://jsfiddle.net/tX3ae/226/
quelle
Fügen Sie die Klasse zur form.group hinzu, um die Eingaben einzuschränken
quelle
Wenn Sie die Master.Site-Vorlage in Visual Studio 15 verwenden, verfügt das Basisprojekt über "Site.css", das die Breite der Formularsteuerungsfelder überschreibt.
Ich konnte die Breite meiner Textfelder nicht erreichen, um breiter als etwa 300 Pixel zu werden. Ich habe ALLES versucht und nichts hat funktioniert. Ich habe festgestellt, dass es in Site.css eine Einstellung gibt, die das Problem verursacht hat.
Wenn Sie dies loswerden, können Sie die Kontrolle über Ihre Feldbreiten erlangen.
quelle
Ich weiß, dass dies ein alter Thread ist, aber ich habe das gleiche Problem mit einem Inline-Formular festgestellt, und keine der oben genannten Optionen hat das Problem gelöst. Also habe ich mein Inline-Formular so korrigiert: -
Das war meine Lösung. Etwas hackig, aber für ein Inline-Formular erledigt.
quelle
Sie können das Stilattribut oder eine Definition für das Eingabe-Tag in einer CSS-Datei hinzufügen.
Option 1: Hinzufügen des Stilattributs
Option 2: Definition in CSS
Sie können die 100px in Auto ändern
Ich hoffe ich konnte helfen.
quelle
In Bootstrap 3
http://getbootstrap.com/css/#forms-example
In einigen Fällen müssen wir die maximale Breite, die wir für die Eingaben wünschen, manuell einstellen.
Wie auch immer, Ihr Beispiel funktioniert. Überprüfen Sie es einfach mit einem großen Bildschirm, damit Sie sehen können, dass der Name und die E-Mail-Felder die 2/12 der mit (col-lg-1 + col-lg-1 und Sie haben 12 Spalten) erhalten. Wenn Sie jedoch einen kleineren Bildschirm haben (ändern Sie einfach die Größe Ihres Browsers), werden die Eingaben bis zum Ende der Zeile erweitert.
quelle
Sie müssen nicht einfach CSS aufgeben :)
quelle
Wenn Sie die Breite der Bootstrap-Eingabeelemente einfach nach Ihren Wünschen verringern oder vergrößern möchten, würde ich sie
max-width
im CSS verwenden.Hier ist ein sehr einfaches Beispiel, das ich erstellt habe:
Ich habe die maximale Breite des gesamten Formulars auf 500 Pixel festgelegt. Auf diese Weise müssen Sie kein Bootstrap-Rastersystem verwenden, und das Formular reagiert weiterhin.
quelle
Ich habe auch mit dem gleichen Problem zu kämpfen, und dies ist meine Lösung.
HTML-Quelle
Decken Sie den Eingabecode mit einer anderen div-Klasse ab
CSS-Quelle
Geben Sie eine beliebige Breiten- oder Randeinstellung für die abgedeckte Div-Klasse an.
Die Eingabebreite von Bootstrap ist immer standardmäßig 100%, sodass die Breite der abgedeckten Breite folgt.
Dies ist nicht der beste Weg, aber die einfachste und einzige Lösung, mit der ich das Problem gelöst habe.
Hoffe das hat geholfen.
quelle
Ich weiß nicht, warum anscheinend jeder die Datei site.css im Inhaltsordner übersehen hat. Schauen Sie sich Zeile 22 in dieser Datei an und Sie sehen die Einstellungen für die zu steuernde Eingabe. Es scheint, dass Ihre Site nicht auf dieses Stylesheet verweist.
Ich habe folgendes hinzugefügt:
input, select, textarea { max-width: 280px;}
zu Ihrer Geige und es funktioniert gut.
Sie sollten niemals bootstrap.css oder bootstrap.min.css aktualisieren. Wenn Sie dies tun, schlagen Sie fehl, wenn der Bootstrap aktualisiert wird. Aus diesem Grund ist die Datei site.css enthalten. Hier können Sie Änderungen an der Site vornehmen, die Ihnen immer noch das gewünschte reaktionsschnelle Design bieten.
Hier ist die Geige damit
quelle
Fügen Sie
style=""
dem Eingabefeld Begriffe für das hinzu und definieren Sie es. Dies ist der einfachste Weg: Beispiel:quelle
Bootstrap verwendet die Klasse 'Formulareingabe' zur Steuerung der Attribute von 'Eingabefeldern'. Fügen Sie einfach Ihre eigene Klasse für die Formulareingabe mit der gewünschten Breite, dem gewünschten Rand, der gewünschten Textgröße usw. in Ihre CSS-Datei oder Ihren Kopfbereich ein.
(Oder fügen Sie den Inline-Code size = '5' direkt in die Eingabeattribute im Textabschnitt ein.)
quelle
Bootstrap 3 Ich habe ein ansprechendes Formularlayout erreicht, indem ich Folgendes verwendet habe:
quelle