在控件旁边显示glyphicon（Razor with Bootstrap）

Question

我想直接在输入控件的右侧显示一个glyphicon。以下代码包含控件和glyphicon之间的大空间。没有我试过的解决方案都没有正确解决问题而没有垂直堆叠所有控件，或者在验证消息旁边添加了glyphicon（而不是控件。我该如何解决这个问题？

            <div class="form-group">
                    <div class="col-md-2">@Html.LabelFor(m => m.SubmitterLocation)</div>
                    <div class="col-md-4">
                        @Html.TextBoxFor(m => m.SubmitterLocation, new { @class = "form-control" })
                        @Html.ValidationMessageFor(m => m.SubmitterLocation, "", new { @class = "text-danger" })
                    </div>
                    <div class="col-md-6">
                        <a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover" data-placement="right">
                            <span class="glyphicon glyphicon-question-sign" height="42" width="42" style="text-align:center;" />
                        </a>
                    </div>
                </div>

Answer 1

试试这个：

<div class="form-group">
<div class="input-group col-md-4">@Html.LabelFor(sm => sm.SubmitterLocation)
</div>
<div class="input-group">
    @Html.TextBoxFor(m => m.SubmitterLocation, new { @class = "form-control" })
    <span class="input-group-addon">
        <a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover" data-placement="right">
        <i class="glyphicon glyphicon-question-sign"></i>
        </a>
    </span>
    @Html.ValidationMessageFor(m => m.SubmitterLocation, "", new { @class = "text-danger" })
</div>

我在这里做的是我在想要拥有图标的div上添加了输入组。重新排列您的html元素并将图标放在文本框旁边，并在span类上添加一个 input-group-addon 类。

现在看起来像这样：