Bootstrap 3: Legen Sie benutzerdefinierte Breite mit input-group/input-group-addon und horizontale Beschriftungen

Ich würde gerne die Größe meiner input-Elemente mit der Klasse .col-lg-* skizziert hier auf der bootstrap-website. Allerdings setzen die <span> - element innerhalb eines div-völlig Durcheinander it up:

HTML mit div:

<div class="input-group input-group-lg">
  <label for="" class="control-label">Paycheck</label>
  <div class="col-lg-10">
    <span class="input-group-addon">$</span> 
    <input type="text" class="form-control" id="">
  </div>
</div>

Wie kann ich die Breite des input-Elemente, so dass Sie alle das gleiche?

Ich möchte den linken Rand jedes input-element bündig so:

Dies ist, wie es jetzt aussieht:

Dies ist meine aktuelle HTML:

    <div class="col-md-6">
        <div class="content">
            <h2>Income</h2>
        <form class="form-income form-horizontal" role="form">

            <div class="input-group input-group-lg">
            <label for="" class="control-label">Paycheck</label>
                <span class="input-group-addon">$</span> 
                <input type="text" class="form-control" id="">
            </div>

            <div class="input-group input-group-lg">
            <label for="" class="control-label">Investments</label>
                <span class="input-group-addon">$</span>
                <input type="text" class="form-control" id=""> 
            </div>

            <div class="input-group input-group-lg">
            <label for="" class="control-label">Other</label>
                <span class="input-group-addon">$</span> 
                <input type="text" class="form-control" id="">
            </div>

            <button class="btn btn-lg btn-primary btn-block" type="submit">Update</button>
        </form>

        </div>

LIVE-BEISPIEL: http://jsfiddle.net/jfXUr/

Nur .form-control und .input-group-addon Elemente sollten rein .input-group Container. Verwenden .form-group Gruppe Ihre Etiketten und .input-group Elemente
Wie ist das - jsfiddle.net/jfXUr/1 ?

InformationsquelleAutor Keven | 2013-11-29

17

Als pro meinen Kommentar oben, versuchen Sie, die Gruppierung der Beschriftung und .input-group zusammen mit einem .form-group container.
```
<div class="form-group">
    <label for="" class="control-label">Paycheck</label>
    <div class="input-group input-group-lg">
        <span class="input-group-addon">$</span> 
        <input type="text" class="form-control" id="">
    </div>
</div>
```
Demo hier - http://jsfiddle.net/jfXUr/1/
- Danke Phil. Was du gemacht hast sieht gut aus, aber ich möchte wirklich die labels zeigen neben dem input-Elemente. Ist das möglich?
- Für, dass Sie sollten mit .form-horizontal. Müssen Sie die col- Klassen Ihre Etiketten und .input-group Elemente für die Größenanpassung
- Ich bin bereits über .form-horizontal in meinem Formular ein element. So sollte es funktionieren, wenn ich die .input-group Klasse auf meine Etiketten? Irgendeiner Weise, die Sie tun könnte, die Geige, um mir zu zeigen was du meinst?
- Ah, deine Geige nicht form-horizontal. Hier ist eine horizontale Beispiel - jsfiddle.net/jfXUr/3. Hinweis: die col- Klassen auf den Etiketten und input-Gruppen. Ich habe xs Spalten, so dass es im JSFiddle kleinen windows
- Vielen Dank Phil!! Du bist genial. Es arbeitete. Ich habe bemerkt, das xs. Ich werde zu ändern, die zu meinen Anforderungen passen. Haben ein gutes!
InformationsquelleAutor Phil

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.