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

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

<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

输入对象上的Bootstrap form-inline图标不在最后

1 个答案: