如何在bootstrap中输入ALWAYS旁边放置反馈图标

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

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

由于

Answer 1

在表单中使用网格列时，请确保它具有form-horizontal类。对于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