Added support for multiple .form-controls per .input-group

[brenjt]

This will add support for form-controls to be inline and grouped together. I propose we make it official. It may need further adjustments.

.input-group-field {
    display: table-cell;
    vertical-align: middle;
    border-radius:4px;
    min-width:1%;
    white-space: nowrap;
}
.input-group-field .form-control {
    border-radius: inherit !important;
}
.input-group-field:not(:first-child):not(:last-child) {
    border-radius:0;
}
.input-group-field:not(:first-child):not(:last-child) .form-control {
    border-left-width: 0;
    border-right-width: 0;
}
.input-group-field:last-child {
    border-top-left-radius:0;
    border-bottom-left-radius:0;
}

Example HTML:

    <div class='input-group'>
        <span class='input-group-addon'>Add On</span>
        <input type='text' class='form-control' placeholder="Field 1" />
        <div class='input-group-field'>
            <input type='text' class='form-control' placeholder="Field 2" />
        </div>
        <div class='input-group-field'>
            <input type='text' class='form-control' placeholder="Field 3" />
        </div>
    </div>

Previews: http://jsfiddle.net/523Vc/, http://jsfiddle.net/523Vc/1/

[cvrebert]

X-Ref: #12109.

[mdo]

Thanks, but we won't be going this route. The CSS for that is rather gnarly and I don't see a common enough need for this.

[brenjt]

The CSS is actually the same CSS used for the .input-group-btn and .input-group-addon with minor adjustments.

Here is a perfectly useful use case for this: http://jsfiddle.net/523Vc/1/

[ghost]

+1

[Darunada]

I pretty much hacked this in anyways to create a single row with city,state, zip. +1

[krugerdavid]

@brenjt if you don't mind, I will use your code for adding multiple inputs, a basic case to use are checkout fields, primary on mobile :) +1

[Fredar]

@brenjt Thanks for the inspiration. This is a 3rd time I needed that and finally got it done. +1