jquery - 如何在 Bootstrap 中始终在输入旁边放置反馈图标

Question

在设计表单时，当输入的宽度低于 100% 反馈图标不会放置在其旁边时:

<div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
         <input class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status" style="width: 40%;" type="text">
         <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>                    
     </div>
</div>

如果我给输入样式赋予 width:40% 反馈图标位置不变:

Demo

即使宽度或显示宽度发生变化，我如何始终在输入旁边放置反馈图标。

谢谢

Answer 1

在表单中使用网格列时，请确保它具有 form-horizo​​ntal 类。对于 has-feedback 图标，必须在输入容器上设置宽度。在这种情况下，您可以使用 col-sm-5，因为它的宽度约为 41%。

<form class="form-horizontal">
        <div class="form-group has-success has-feedback">
            <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
            <div class="col-sm-5">
                <input class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status" type="text">
                <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            </div>
        </div>
    </form>

Demo