Eingabebreiten auf Bootstrap 3

155

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

http://jsfiddle.net/tX3ae/

<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>
Cyberwombat
quelle
5
Warum Bootstrap verwenden, um diese Breiten zu verwalten? Es scheint nicht besonders gut darin zu sein, und es führt zu Komplexität.
Eamon Nerbonne
1
Warum dafür Bootstrap verwenden, @Eamon? Das reaktionsschnelle Design und die Ausrichtung mit den übrigen Elementen, die Bootstrap verarbeitet, fallen Ihnen ein. Und überhaupt, der springende Punkt ist die Frage , wie es zu tun , ohne die Komplexität einzuführen.
CTB
@ctb: einfaches CSS behandelt diese Art von Problemen einwandfrei; Die zusätzliche Komplexität von Bootstrap ist nicht erforderlich.
Eamon Nerbonne
1
Also warte, wurde diese Frage beantwortet? 38 Upvotes sind viel.
Turm
1
@rook - die Antwort ist, dass es keine eingebaute Funktionalität gibt, obwohl sie auf ihrer Diskussionsliste steht. Als Alternative werden hier jedoch einige bereitgestellt, bis / wenn BS dies tatsächlich hinzufügt.
Cyberwombat

Antworten:

95

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:

<div class="container">
    <h1>My form</h1>
    <p>How to make these input fields small and retain the layout.</p>
    <form role="form">
        <div class="row">
            <div class="form-group col-lg-1">
                <label for="code">Name</label>
                <input type="text" class="form-control" />
            </div>
        </div>

        <div class="row">
            <div class="form-group col-lg-1 ">
                <label for="code">Email</label>
                <input type="text" class="form-control input-normal" />
            </div>
        </div>
        <div class="row">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </form>
</div>

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:

IF SCREEN WIDTH < 'lg' (1200px by default)

   USE DEFAULT BLOCK BEHAVIOUR (width=100%)

ELSE

   APPLY 'col-lg-1' (~95px)

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.

shadowf
quelle
Ja, das habe ich in meinem Kommentar zu @Skelly angegeben. Es gibt ein offenes Problem, und sie werden es ansprechen, sobald sich die Dinge beruhigt haben. Das Hinzufügen von Zeilen ist nicht das, wonach ich suche, aufgrund des zusätzlichen Aufschlags, der völlig unnötig ist, wenn sie die richtigen Klassen erstellt haben - was ich auch getan habe. Ich habe .input1-12 mit prozentualer Breite erstellt und wende das einfach auf die Eingabe an - funktioniert großartig
Cyberwombat
7
Ich habe nicht viel über diesen Beitrag gelesen, aber ... "Verwenden Sie die vordefinierten Rasterklassen von Bootstrap, um Beschriftungen und Gruppen von Formularsteuerelementen in einem horizontalen Layout auszurichten, indem Sie dem Formular .form-horizontal hinzufügen. Dadurch wird das Verhalten von .form-Gruppen geändert als Gitterreihen, also keine Notwendigkeit für .row. "
DC
@dtc Das hilft aber nicht viel für Eingabebreiten?
Jacques
@shadowf Und was ist, wenn ich eine Eingabe kürzer als ihre Bezeichnung machen möchte? Muss ich eine Eingabe in ein weiteres Paar von Divs eingeben?
PowerGamer
1
Danke, das funktioniert bei mir. Übrigens ist es Sonntag 22 Uhr für mich :-) da ich auf der anderen Seite der Welt bin.
Ananda
70

In Bootstrap 3

Sie können einfach einen benutzerdefinierten Stil erstellen:

.form-control-inline {
    min-width: 0;
    width: auto;
    display: inline;
}

Fügen Sie es dann zu folgenden Steuerelementen hinzu:

<div class="controls">
    <select id="expirymonth" class="form-control form-control-inline">
        <option value="01">01 - January</option>
        <option value="02">02 - February</option>
        <option value="03">03 - March</option>
        <option value="12">12 - December</option>
    </select>
    <select id="expiryyear" class="form-control form-control-inline">
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
    </select>
</div>

Auf diese Weise müssen Sie kein zusätzliches Markup für das Layout in Ihr HTML einfügen.

George Filippakos
quelle
15
Dies gewinnt bei weitem bei den Antworten. Es ist sauber, wiederverwendbar und funktioniert einfach. Tatsächlich sollte es standardmäßig in den Bootstrap gestellt werden, da dies ein sehr häufiger Ärger ist. Sehr selten möchten Sie reine Blockformen.
Baweaver
Ich habe diese Lösung ausprobiert, aber sie hat bei mir nicht funktioniert. Ich wollte die Breite meines Feldes begrenzen, also habe ich im benutzerdefinierten Stil 'width: 200px' verwendet, aber das hat die Breite nicht geändert. Erst als ich 'max-width: 200px' eingestellt habe, habe ich das richtige Ergebnis erhalten.
Paulo62
Wenn ich dies verwende, überschreibt die Breite nicht die automatische Breite der Formularsteuerungsklasse.
Johnny
1
Ich bin mit den Kommentaren hier einverstanden. Ich habe es tatsächlich versucht, bevor ich hier nachgesehen habe. Es scheint die Standardeinstellungen nicht zu überschreiben. Ich bin mir nicht sicher, warum einige benutzerdefinierte Stile dies tun und andere nicht.
Wil
1
Hier ist eine Geige, die zeigt, wie das aussieht: jsfiddle.net/yd1ukk10
brandones
25

ASP.net MVC gehen Sie zu Content-Site.css und entfernen oder kommentieren Sie diese Zeile:

input,
select,
textarea {
    /*max-width: 280px;*/
}
user2648846
quelle
Wenn Sie sich die Geige ansehen, werden Sie sehen, dass das OP die Felder kleiner und nicht größer machen möchte. Das größere Problem hierbei ist, dass seine Site überhaupt nicht auf site.css verweist.
Bmize729
Ich wusste nicht, dass es eine CSS-Regel gibt, und es machte mich verrückt, dass meine angegebenen Breiten ignoriert wurden. Danke dir.
Michael S. Miller
10

Ich denke, Sie müssen die Eingaben in ein col-lg-4und dann in das form-groupund alles wird in einem eingeschlossen form-horizontal.

    <form class="form form-horizontal">
         <div class="form-group">
           <div class="col-md-3">
            <label>Email</label>
            <input type="email" class="form-control" id="email" placeholder="email">
           </div>
         </div>
         ...
     </form>

Demo auf Bootply - http://bootply.com/78156

BEARBEITEN: Aus den Bootstrap 3-Dokumenten.

Eingaben, Auswahlen und Textbereiche sind in Bootstrap standardmäßig 100% breit. Um das Inline-Formular zu verwenden, müssen Sie eine Breite für die darin verwendeten Formularsteuerelemente festlegen.

Eine weitere Option ist das Festlegen einer bestimmten Breite mithilfe von CSS:

.form-control {
    width:100px;
}

Oder wenden Sie das col-sm-*auf die Formulargruppe an.

Zim
quelle
6
Sie müssen der Formulargruppe eine Zeilenklasse hinzufügen. Ich habe eine Diskussion mit dem Bootstrap-Team geführt und sie haben der Planungsliste die Möglichkeit hinzugefügt, eine bestimmte Breitensteuerung einzugeben. In der Zwischenzeit müssen wir volle Gitter verwenden. Wenn Sie der Formulargruppenklasse eine Zeile hinzufügen und die horizontale Klasse entfernen, werde ich diese Antwort markieren. Hier ist die funktionierende Geige jsfiddle.net/tdUtX/2 und die Planung github.com/twbs/bootstrap/issues/9397
Cyberwombat
1
+ @ Yashua - +1 tolles Beispiel. Dies funktioniert auch mit der Eingabegruppenklasse, was mir Probleme bereitete.
David Robbins
10

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:

<div class="container">
  <h1>My form</h1>
  <p>How to make these input fields small and retain the layout.</p>
  <div class="row">
    <form role="form" class="col-xs-3">

      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" name="name" >
      </div>

      <div class="form-group">
        <label for="email">Email</label>
        <input type="text" class="form-control" id="email" name="email">
      </div>

      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</div>

http://jsfiddle.net/tX3ae/226/

Ced
quelle
1
funktioniert nicht für kleine Geräte, da das Eingabefeld zu klein wird
FranBran
9
<div class="form-group col-lg-4">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>

Fügen Sie die Klasse zur form.group hinzu, um die Eingaben einzuschränken

BetoCuevas
quelle
8
Das funktioniert nicht wirklich. Es bewirkt, dass jedes nachfolgende Element neben diesem schwebt. Sie müssen jeder Formulargruppe ein div mit Klassenzeile hinzufügen, was lächerlich ist.
Cyberwombat
6

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.

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
    max-width: 280px;
}
Joe Schmucker
quelle
Danke Mann, vier Jahre später hat mich das gerettet
Rich vor
4

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

<form class="form-inline" action="" method="post" accept-charset="UTF-8">
    <div class="row">
        <div class="form-group col-xs-7" style="padding-right: 0;">
            <label class="sr-only" for="term">Search</label>
            <input type="text" class="form-control" style="width: 100% !important;" name="term" id="term" placeholder="Search..." autocomplete="off">
            <span class="help-block">0 results</span>
        </div>
        <div class="form-group col-xs-2">
            <button type="submit" name="search" class="btn btn-success" id="search">Search</button>
        </div>
    </div>
</form>

Das war meine Lösung. Etwas hackig, aber für ein Inline-Formular erledigt.

Mattauckland
quelle
4

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

<input type="text" class="form-control" id="ex1" style="width: 100px;">


Option 2: Definition in CSS

input{
  width: 100px
}

Sie können die 100px in Auto ändern

Ich hoffe ich konnte helfen.

DW_
quelle
3

In Bootstrap 3

Alle textuellen <eingabe> -, <textarea> - und <select> -Elemente mit .form-control sind auf width: 100% eingestellt; standardmäßig.

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.

José Antonio Postigo
quelle
3

Sie müssen nicht einfach CSS aufgeben :)

.short { max-width: 300px; }
<input type="text" class="form-control short" id="...">
Adler
quelle
1

Wenn Sie die Breite der Bootstrap-Eingabeelemente einfach nach Ihren Wünschen verringern oder vergrößern möchten, würde ich sie max-widthim CSS verwenden.

Hier ist ein sehr einfaches Beispiel, das ich erstellt habe:

    <form style="max-width:500px">

    <div class="form-group"> 
    <input type="text" class="form-control" id="name" placeholder="Name">
    </div>

    <div class="form-group">
    <input type="email" class="form-control" id="email" placeholder="Email Address">
    </div>

    <div class="form-group">
    <textarea class="form-control" rows="5" placeholder="Message"></textarea>
    </div>   

    <button type="submit" class="btn btn-primary">Submit</button>
    </form>

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.

user3574492
quelle
0

Ich habe auch mit dem gleichen Problem zu kämpfen, und dies ist meine Lösung.

HTML-Quelle

<div class="input_width">
    <input type="text" class="form-control input-lg" placeholder="sample">
</div>

Decken Sie den Eingabecode mit einer anderen div-Klasse ab

CSS-Quelle

.input_width{
   width: 450px;
}

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.

Hyung Woo Kim
quelle
0

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

Bmize729
quelle
0

Fügen Sie style=""dem Eingabefeld Begriffe für das hinzu und definieren Sie es. Dies ist der einfachste Weg: Beispiel:

<form>
    <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email" style="width:200px;">
    </div>
    <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" style="width:200px">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>
Kingsley Asifor
quelle
0

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

<script async src="//jsfiddle.net/tX3ae/embed/"></script> 
Prasant Nair
quelle
0

Bootstrap 3 Ich habe ein ansprechendes Formularlayout erreicht, indem ich Folgendes verwendet habe:

<div class="row">
    <div class="form-group  col-sm-4">
        <label for=""> Date</label>
        <input type="date" class="form-control" id="date" name="date" placeholder=" date">
    </div>

    <div class="form-group  col-sm-4">
        <label for="hours">Hours</label>
        <input type="" class="form-control" id="hours" name="hours" placeholder="Total hours">
    </div>
</div>
Ravi Ram
quelle