在内联表单中使用输入组 [英] Using input-group inside an inline form

问题描述

将输入组附加到 form-inline 时，组出现在新行的表单下方，而不是与其他控件的内联。

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



所以我的问题是可以在内联表单中使用 input-group >仅使用Bootstrap类？

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

 < form action =class =form-inline> 
< input type =textclass =form-controlplaceholder =Works withstyle =width：100px;/> 
< input type =textclass =form-controlplaceholder =Text Inputsstyle =width：120px;/> 
 
< div class =checkbox> 
< label> 
< input type =checkbox/>和复选框
< / label> 
< / div> 
< select class =form-controlstyle =width：150px;> 
< option>并选择< / option> 
< / select> 
 
< button type =submitclass =btn btn-default>和按钮< / button> 
< div class =input-groupstyle =width：220px;> 
< span class =input-group-addon> BUT< / span> 
< input type =textclass =form-controlplaceholder =not with input-groups/> 
< / div> 
< / form> 
  

解决方案

这确实是一个错误， github上的问题了解详情）。

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

代码将变为：

 < form action =class =form-inline> 
< div class =form-group> 
< input type =textclass =form-controlplaceholder =Works withstyle =width：100px;/> 
< / div> 
 
 ... 
< div class =form-group> 
< div class =input-groupstyle =width：220px;> 
< span class =input-group-addon> BUT< / span> 
< input type =textclass =form-controlplaceholder =not with input-groups/> 
< / div> 
< / div> 
< / form> 
  

When appending an input-group to a form-inline, the input-group appears below the form on a "new line" instead of inline with the other controls.

It seems that this is because the input-group wrapper class has display set to table whereas the other inputs, which work fine, have their display set to inline-block. Of course, it is not possible to give the input-group the inline-block display because its child add-on span, which has display: table-cell, needs the property of the parent to align correctly.

So my question is: is it possible to use input-group inside an inline form using Bootstrap classes exclusively? If not, what would be the best work-around allowing the use of custom classes.

Here is a demo illustrating my point. The code is the following:

<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>

解决方案

This was indeed a bug and was resolved (check the issue on github for more info).

From now on the inline forms in BootStrap require to wrap the child form controls with .form-group.

So my code would become:

<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>

这篇关于在内联表单中使用输入组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！