javascript - 输入组将下一个输入推送到下一行

Question

我有一个行，分为两部分(col-md-5 和 col-md-7)。第一部分包含一个问题，第二部分有 6 个输入字段(5 个文本输入和 1 个选择框)。

因此，我将第二部分分为 6 个字段(col-sm-2)。一切正常。现在我想将 input-group-addon 添加到两个文本字段。但是，当我尝试将 input-group 添加到该输入框的父 div 时，输入框的大小会增加，并将所有输入框(旁边的)推到下一行.

这是代码

<div class="row">
    <div class="col-md-5">
        <p class="text-info">How many PRI"s? How much are you paying per month?</p>
    </div>
    <div class="col-md-7">
        <div class="form-group">
            <div class=" col-sm-2">
                <input type="text" value="" name="pri_qty" class="form-control input-sm" placeholder="QTY">
            </div>
            <!-- i want to add input-group to the next input field -->
            <div class=" col-sm-2">
                <input type="text" value="" name="pri_mrate" class="form-control input-sm" placeholder="$/M">
            </div>
            <div class=" col-sm-2">
                <select name="pri_competitor_id" class="form-control input-sm"><option selected="selected" value="">Provider</option><option value="1">ALLSTREAM</option><option value="2">BELL</option><option value="3">BV</option><option value="4">CONVERGIA</option><option value="5">DISTRIBUTEL</option><option value="6">ONE CONNECT</option><option value="7">TELSYNERGIE</option><option value="8">TELUS</option><option value="9">VIDEOTRON</option><option value="10">SELECTCOM</option><option value="11">OTHER</option></select>
            </div>
            <div class=" col-sm-2">
                <input type="text" value="" name="pri_avaya" class="form-control input-sm" placeholder="Avaya">
            </div>
            <div class=" col-sm-2">
                <input type="text" value="" name="pri_our_rate" class="form-control input-sm" placeholder="$/M">
            </div>
            <div class=" col-sm-2">
                <input type="text" value="" name="pri_install" class="form-control input-sm" placeholder="Setup">
            </div>
        </div>
    </div>
</div>

`

Answer 1

来自输入组的 Bootstrap 文档 ( http://getbootstrap.com/components/#input-groups ):

Don't mix with other components

Do not mix form groups or grid column classes directly with inputgroups.

Instead, nest the input group inside of the form group or grid-related element.

因此，不要将 .input-group-addon 添加到 .col-sm-2 中，而是将输入包装在另一个 div.input-group-addon 中。