26

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

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

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

这是一个演示我的观点的演示。代码如下：

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

2 回答 2

44

这确实是一个错误并已解决（有关更多信息，请查看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>
于 2013-08-12T19:06:01.157 回答
1

我认为您可能需要将表单分成列以获得所需的内联布局。一个例子（我想到了你所追求的）在 Bootstrap 网站上。

试着把

<div class="col-lg-1"></div>

围绕你的控制，看看我的意思。您当然需要在 12 列中工作，因此需要相应地进行调整。

于 2013-08-12T16:25:01.293 回答