html - 输入对象上的 Bootstrap 表单内联图标不在末尾

Question

我想做一个带有验证状态和图标的在线表单，但我希望图标位于输入而不是选择上。

我有这样的代码: http://jsfiddle.net/Lzfx1rky/2/

<form class="form-inline">
<div class="form-group has-success has-feedback">
    <input type="text" class="form-control">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <select class="form-control">
        <option>a</option>
        <option>b</option>
    </select>
</div>

有什么方法可以做到这一点，或者我只需要将输入放在另一个 div 上并只把图标放在那里？

谢谢

Answer 1

您可以使用 Bootstrap 网格类进行内联。您的设计变得灵敏，您可以轻松控制每个元素的大小。

<form>
<div class="form-group has-success has-feedback">
    <div class="col-xs-6">
        <input type="text" class="form-control">
        <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    </div>
    <div class="col-xs-6">
        <select class="form-control" style="float: left;">
            <option>a</option>
            <option>b</option>
        </select>
    </div>
</div>

结果如下:

JSFiddle