it-swarm.com.de

Eingabebreiten bei 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 Gitter zu verwenden oder zusätzliches CSS hinzuzufügen. Gitter funktionieren nicht gut, wenn Sie es mit help-block -Elementen zu tun haben, die zum Beispiel über eine kurze Eingabe hinausgehen müssen, aber 'eingebaut' sind. Wenn das ein Problem ist, empfehle ich die Verwendung zusätzlicher CSS-Klassen, die Sie in der BS3-Diskussion finden hier . Jetzt, da BS4 herauskommt, ist es möglich, die enthaltenen Größen Stile zu verwenden, um dies zu verwalten, so dass dies nicht mehr lange relevant sein wird. Vielen Dank für Ihre Anregungen zu dieser beliebten SO Frage.

Update: Diese Frage bleibt offen, da es sich um in BS integrierte Funktionen zur Verwaltung der Eingabebreite handelt ohne auf Grid zurückzugreifen (manchmal müssen sie unabhängig verwaltet werden). Ich verwende bereits benutzerdefinierte Klassen, um dies zu verwalten, so dass dies keine Anleitung für grundlegende CSS ist. Die Aufgabe befindet sich in BS Feature Discussion List und muss noch bearbeitet werden.

Ursprüngliche Frage: Findet jemand eine Möglichkeit, die Eingabebreite unter BS 3 zu verwalten? Ich verwende derzeit einige benutzerdefinierte Klassen, um diese Funktionalität hinzuzufügen, habe jedoch möglicherweise einige nicht dokumentierte Optionen verpasst.

Aktuelle Dokumente empfehlen die Verwendung von .col-lg-x, aber das funktioniert offensichtlich nicht, da es nur auf den Container div angewendet werden kann, der dann alle Arten von Layout-/Float-Problemen verursacht.

Hier ist eine Geige. Seltsam ist, dass ich auf der Geige nicht einmal die Formulargruppe 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>
147
cyberwombat

Was Sie tun möchten, ist auf jeden Fall 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. Beachten Sie jedoch, dass Sie in Ihren ursprünglichen Klassen nur 'col-lg-1' verwenden. Das heißt, wenn die Bildschirmbreite kleiner als die Medienabfragegröße "lg" ist, wird das Standardblockverhalten verwendet. 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 mir war klar, sonst lass es mich wissen und ich würde näher darauf eingehen.

92
shadowf

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 wie folgt zu Formularsteuerelementen 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 Ihren HTML-Code einfügen.

69

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

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

Aktuelle Dokumente empfehlen die Verwendung von .col-xs-x, no lg. Dann probiere ich Geige und es scheint zu funktionieren:

http://jsfiddle.net/tX3ae/225/

um das Layout beizubehalten, können Sie möglicherweise die Position der Klasse "row" wie folgt ändern:

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

10
Ced

Ich denke, Sie müssen die Eingaben in einen col-lg-4 und dann in den form-group einschließen, und alles ist in einem form-horizontal enthalten.

    <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

EDIT: 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 Möglichkeit ist, eine bestimmte Breite mit CSS festzulegen:

.form-control {
    width:100px;
}

Oder wenden Sie den col-sm-* auf die `Formulargruppe 'an.

10
Zim
<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 zu beschränken

9
Larvex

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 meine Textfelder nicht breiter als etwa 300px machen. Ich habe ALLES ausprobiert und nichts hat funktioniert. Ich fand, dass es eine Einstellung in Site.css gibt, die das Problem verursachte.

Wenn Sie dies beseitigen, können Sie die Feldbreiten steuern.

/* 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;
}
5
Joe Schmucker

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

<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. Bit hacky hack, aber hat den Job für ein Inline-Formular erledigt.

4
mattauckland

In Bootstrap 3

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

http://getbootstrap.com/css/#forms-example

Es scheint, dass wir in einigen Fällen die maximale Breite für die Eingaben manuell einstellen müssen.

Wie auch immer, dein 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="...">
3
Eagle

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.

3
Daan Witte

Wenn Sie einfach die Breite der Bootstrap-Eingabeelemente nach Ihren Wünschen verringern oder erhöhen möchten, würde ich im CSS max-width 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 Rastersystem von Bootstrap verwenden, und das Formular bleibt reaktionsschnell.

1
user3574492

Bootstrap verwendet die Klasse "Formulareingabe" zum Steuern der Attribute von "Eingabefeldern". Fügen Sie einfach Ihre eigene Formulareingabeklasse mit der gewünschten Breite, Rahmen, Textgröße usw. in Ihre CSS-Datei oder Ihren Kopfabschnitt ein.

(Oder fügen Sie den Inline-Code size = '5' direkt in die Eingabeattribute im body-Abschnitt ein.)

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

Fügen Sie dem Eingabefeld Begriffe für den style="" hinzu und definieren Sie sie. Dies ist der einfachste Weg, dies zu tun: 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>
0
Kingsley Asifor

Ich weiß nicht, warum jeder die site.css-Datei im Inhaltsordner übersehen hat. In Zeile 22 dieser Datei sehen Sie 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. Andernfalls schlagen Sie fehl, wenn bootstrap aktualisiert wird. Aus diesem Grund ist die Datei site.css enthalten. Hier können Sie Änderungen an der Site vornehmen, die Ihnen dennoch das gewünschte ansprechende Design bieten.

Hier ist die Geige dabei

0
Bmize729

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

HTML-Quelle

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

Deckt den eingegebenen Code mit einer anderen div-Klasse ab

CSS-Quelle

.input_width{
   width: 450px;
}

geben Sie eine beliebige Breite oder Randeinstellung für die abgedeckte Div-Klasse an.

Die Eingabebreite von Bootstrap ist standardmäßig immer 100%, sodass die Breite der überdeckten Breite folgt.

Dies ist nicht der beste Weg, sondern die einfachste und einzige Lösung, mit der ich das Problem gelöst habe.

Hoffe das hat geholfen.

0
Hyung Woo Kim

Bootstrap 3 Ich habe ein ansprechendes Formularlayout wie folgt erstellt:

<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>
0
Ravi Ram