Question

我有row分为两部分（col-md-5 and 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

来自输入组的引导文档（http://getbootstrap.com/components/#input-groups）：

不要与其他组件混合

不要将表单组或网格列类直接与输入混合使用   基团。

而是将输入组嵌套在表单组或与网格相关的元素中。

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

input-group将下一个输入推送到下一行

1 个答案: