在内联表单中使用输入组

Question

当附加input-group到a时form-inline,在input-group"新行"上显示在表单下方而不是与其他控件内联.

看起来这是因为input-group包装器类display设置为table而其他输入正常工作,其display设置为inline-block.当然,这是不可能给予input-group的inline-block显示器,因为它的子add-on跨度,其中有display: table-cell,需要父母的财产,以正确对齐.

所以我的问题是:是否可以使用Bootstrap类专门input-group在内联表单中使用？如果没有,那么允许使用自定义类的最佳解决方法是什么.

这是一个说明我的观点的演示.代码如下:

<form action="" class="form-inline">
    <input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
    <input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/>

    <div class="checkbox">
        <label>
            <input type="checkbox" /> and Checkboxes
        </label>
    </div>
    <select class="form-control" style="width: 150px;">
        <option>and Selects</option>
    </select>

    <button type="submit" class="btn btn-default">and Buttons</button>
    <div class="input-group" style="width: 220px;">
        <span class="input-group-addon">BUT</span>
        <input type="text" class="form-control" placeholder="not with input-groups" />
    </div>
</form>

Answer 1

这确实是一个错误并且已经解决(请查看github上的问题以获取更多信息).

从现在开始,BootStrap中的内联表单需要包装子表单控件.form-group.

所以我的代码将成为:

<form action="" class="form-inline">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
    </div>

    ...
    <div class="form-group">
        <div class="input-group" style="width: 220px;">
            <span class="input-group-addon">BUT</span>
            <input type="text" class="form-control" placeholder="not with input-groups" />
        </div>
    </div>
</form>