it-swarm.com.de

Wie werden Eingaben in Bootstrap-Form mit Eingabegruppen-Addons abgeglichen?

Ich habe ein sehr einfaches Formular mit Bootstrap 3, das ich leicht (automatisch) ausrichten kann, wenn ich input-group-addons nicht verwende. 

Nachdem ich sie in meinem Formular verwendet habe, ist es unmöglich, sie auszurichten (die Linie mit Addons ist aufgrund der hinzugefügten Addons breiter).

<form class="form-horizontal" role="form">

    <div class="form-group">
      <label for="product_name" class="col-sm-2 control-label">Product name</label>
      <div class="col-sm-4">
        <input type="text" class="form-control" id="product_name" placeholder="Product name">
      </div>
    </div>

    <div class="form-group">
      <label for="product_price" class="col-sm-2 control-label">Price</label>
      <div class="col-sm-4 input-group">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control bfh-number" id="product_price" placeholder="Price" data-min="0" data-max="9999999">
        <span class="input-group-addon">.00</span>
      </div>
    </div>

    <div class="form-group">
      <label for="product_description" class="col-sm-2 control-label">Description</label>
      <div class="col-sm-6">
        <textarea class="form-control" id="product_description" placeholder="Description" rows="5"></textarea>
      </div>
    </div>

    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
    </div>
</form>

JsFiddle: http://jsfiddle.net/Yzxy3/

25
Patryk

Die Bootstrap-Dokumentation für Eingabegruppen sagt:

Mischen Sie keine Eingabegruppe mit anderen Komponenten. (siehe: http://getbootstrap.com/components/#input-groups )

Mischen Sie Formulargruppen oder Rasterspaltenklassen nicht direkt mit Eingabegruppen. Verschachteln Sie stattdessen die Eingabegruppe innerhalb der Formulargruppe oder des gitterbezogenen Elements. "

Sie können also "col-sm-4" nicht mit "input-group" in derselben Klasse mischen. Sie müssen 2 Div-Klassen erstellen, die erste mit "col-sm-4" und die andere mit "Eingabegruppe".

<div class="col-sm-4">
  <div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control bfh-number" id="product_price" placeholder="Price" data-min="0" data-max="9999999">
    <span class="input-group-addon">.00</span>
  </div>
</div>

Aktualisiert Fiddle

33
danivek

Es liegt daran, dass .input-group einen Standardwert hat 

padding-right: 0;
padding-left: 0;

ihre div reicht also bis zur vollen Breite, wobei .col-sm-4 Standardstile hat:

padding-right: 15px;
padding-left: 15px;

Damit es wie erwartet funktioniert, können Sie diesen Stil hinzufügen:

.input-group[class*="col-"] {
    padding-right: 15px;
    padding-left: 15px;
}

Aktualisiert Fiddle

17
Felix

Ich finde, ich musste einschließen: float: left auch. Die CSS ist also:

.input-group[class*="col-"] {
    float: left;
    padding-right: 15px;
    padding-left: 15px;
}

Wenn nicht, brachen meine mehrspaltigen Zeilen bei einem Upgrade von Version 3.0.2 auf Version 3.0.3.

--cp

3
cplee70

.input-group [class * = "col-"] ist bei Verwendung nicht nützlich

<fieldset>

Hier ist die Lösung!

.makeHorizontal{  
float:left;
padding-left:20px;
}
0
ErcanE