html - 在内联表单中使用输入组

Question

将 input-group 附加到 form-inline 时，input-group 出现在表单下方的“新行”上而不是与其他控件内联。

这似乎是因为 input-group 包装器类将 display 设置为 table 而其他输入工作正常，将它们的 display 设置为 inline-block。当然，不可能给 input-group inline-block 显示，因为它的子 add-on span，有 display: table-cell，需要父级的属性才能正确对齐。

所以我的问题是:是否可以在内联表单中使用input-group只使用 Bootstrap 类？如果不是，最好的解决方法是允许使用自定义类。

这是一个demo说明我的观点。代码如下:

<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

这确实是一个错误并已解决(查看 issue on 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>