it-swarm.com.de

anpassen der Eingabefeldbreite in Bootstrap 3

Welchen Ersatz gibt es in Bootstrap 3, nachdem Sie wichtige Funktionen wie input-xlarge und input-large entfernt haben?

Natürlich könnte ich col-lg-12 etc verwenden, aber das gibt einen Fehler im Tab-Bereich.

Ich könnte auch style = "width:30px; "verwenden, aber dann würde sie im Gegensatz zu input-xlarge ihre Reaktionsfähigkeit verlieren. Irgendwelche Vorschläge usw.?

47
user2754528

In Bootstrap 3 hat .form-control (die Klasse, die Sie Ihre Eingaben geben) eine Breite von 100%, sodass Sie sie zur Anordnung in col-lg-X divs einfassen können. Beispiel aus den Dokumenten:

<div class="row">
  <div class="col-lg-2">
    <input type="text" class="form-control" placeholder=".col-lg-2">
  </div>
  <div class="col-lg-3">
    <input type="text" class="form-control" placeholder=".col-lg-3">
  </div>
  <div class="col-lg-4">
    <input type="text" class="form-control" placeholder=".col-lg-4">
  </div>
</div>

Siehe unter Spaltengröße .

Es ist ein bisschen anders als in Bootstrap 2.3.2, aber man gewöhnt sich schnell daran.

64

Sie können diese Klassen verwenden

eingabe-lg

eingang

und 

eingabe-Sm

für Eingabefelder und ersetzen Sie input durch btn für Schaltflächen.

Überprüfen Sie diese Dokumentation http://getbootstrap.com/getting-started/#migration

Dadurch wird nur die Höhe des Elements geändert, um die Breite zu verringern, die für die Verwendung von Rastersystemklassen wie col-xs-* col-md-* col-lg-* erforderlich ist. 

Beispiel col-md-3. Siehe doc hier http://getbootstrap.com/css/#grid

6
devo
  <form role="form">
    <div class="form-group">
      <div class="col-xs-2">
        <label for="ex1">col-xs-2</label>
        <input class="form-control" id="ex1" type="text">
      </div>
      <div class="col-xs-3">
        <label for="ex2">col-xs-3</label>
        <input class="form-control" id="ex2" type="text">
      </div>
      <div class="col-xs-4">
        <label for="ex3">col-xs-4</label>
        <input class="form-control" id="ex3" type="text">
      </div>
    </div>
  </form>
2
Andrew Koper

ich löste mich mit einem max-width in meiner Haupt-CSS-Datei. 

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

Es ist eine einfache Lösung mit wenig "Code"

1
Edi G.
<div class="form-group">
                    <div class="input-group col-md-5">
                    <div class="input-group-addon">
                    <span class="glyphicon glyphicon-envelope"></span> 
            </div>
                        <input class="form-control" type="text" name="text" placeholder="Enter Your Email Id" width="50px">

                    </div>
                    <input type="button" name="SIGNUP" value="SIGNUP">
            </div>
0
naveesh