Bootstrap 3：输入字段后面的工具提示图像？

Question

我想在电子邮件地址输入字段后面找到问题符号图像并右对齐输入字段的中心？

<div class="form-group form-group-lg">
    <label class="col-md-2 control-label">{{translation.TELEPHONE}}:</label>
    <div class="col-md-4">
        <input type="text" class="form-control"  ng-model="jdeRetailer.phone" placeholder="Telephone">
    </div>

    <label class="col-md-2 control-label">{{translation.EMAIL}}:</label>
    <div class="col-md-4">
        <input type="text" class="form-control"  ng-model="jdeRetailer.email" placeholder="Email address">
        <span style="font-size:1.3em;" class="glyphicon glyphicon-question-sign"  data-toggle="popover" data-content="Info tooltip text here" data-trigger="hover"></span>
    </div>

</div>

Answer 1

bootstrap的表单控件类具有width:100%属性。更好的方法是将glyphicon设置在正确0位置的绝对位置。

只需将此属性添加到span：

即可

position: absolute;
right: 20px;
top: 15px;

和位置：相对;到span的父母。

Here是代码。

Answer 2

您可以通过将样式添加到输入以display:inline

来实现

＆＃13;

＆＃13;

<div class="form-group form-group-lg">
    <label class="col-md-2 control-label">{{translation.TELEPHONE}}:</label>
    <div class="col-md-4">
        <input type="text" class="form-control"  ng-model="jdeRetailer.phone" placeholder="Telephone">
    </div>

    <label class="col-md-2 control-label">{{translation.EMAIL}}:</label>
    <div class="col-md-4">
        <input type="text" class="form-control"  ng-model="jdeRetailer.email" placeholder="Email address" style="display:inline">
        <span style="font-size:1.3em;" class="glyphicon glyphicon-question-sign"  data-toggle="popover" data-content="Info tooltip text here" data-trigger="hover">?</span>
    </div>

</div>

＆＃13;

＆＃13;

＆＃13;