Eingabebreiten auf Bootstrap 3

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>

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.

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.

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

input,
select,
textarea {
    /*max-width: 280px;*/
}

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.

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/

<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

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;
}

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.

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.

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.

Sie müssen nicht einfach CSS aufgeben :)

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

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.

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.

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

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>

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> 

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>