如何在引导程序中的输入字段旁边放置图标答案

【问题标题】：How to place icon next to input field in bootstrap如何在引导程序中的输入字段旁边放置图标
【发布时间】：2014-12-17 10:22:06
【问题描述】：

我在我的项目中使用引导程序。我正在创建一个编辑表单，其中我必须在输入字段旁边使用一些信息图标，并且在此任务中我面临对齐问题。请查看此图片：

请注意黑白输入字段和图标之间的巨大差距，同样的问题是选择列表和持续时间字段。该图片的html代码为：

<div class="row">
    <div class="col-md-6 form-group">
        @Html.LabelFor(p => p.Services[0].FixedTimeSlot, new { @class = "col-md-5 control-label small" })
        <div class="col-md-5">
            @Html.TextBoxFor(p => p.Services[0].FixedTimeSlot, new { @class = "form-control input-sm", data_bind = "value: FixedTimeSlot" })
            @Html.ValidationMessageFor(p => p.Services[0].FixedTimeSlot, "", new { @class = "help-block" })
        </div>
        <div class="col-md-2">
            <a tabindex="-1" href="javascript:void(0);"><span class="fa fa-info-circle text-info icon-ms" data-bind=""></span></a>
        </div>
    </div>
    <div class="col-md-6 form-group">
        @Html.LabelFor(p => p.Services[0].Duration, new { @class = "col-md-5 control-label small" })
        <div class="col-md-7">
            <div class="row">
                <div class="col-md-6">
                    @Html.TextBoxFor(p => p.Services[0].Duration, new { @class = "form-control input-sm", data_bind = "value: Duration" })
                </div>
                <div class="col-md-6">
                    <select class="form-control input-sm" data-bind="options: $parents[1].timeUnits, optionsText: 'unit', optionsValue: 'value', value: selectedTimeUnit"></select>
                </div>
            </div>
            @Html.ValidationMessageFor(p => p.Services[0].Duration, "", new { @class = "help-block" })
        </div>
    </div>
</div>

我是 bootstrap 的新手，并且在 css 中很熟悉，所以我不想写 css，这个问题可以使用 bootsrap 类解决吗？？

【问题讨论】：

这个问题可以通过将包含图标的放置在与您的输入相同的列中来解决。将包含图标的跨度放置在它自己的列中将使其左对齐列。

标签： javascript css asp.net-mvc twitter-bootstrap-3

【解决方案1】：

试试这个

<div class="col-md-6 form-group">
    @Html.LabelFor(p => p.Services[0].FixedTimeSlot, new { @class = "col-md-5 control-label small" })
    <div class="col-md-5">
        @Html.TextBoxFor(p => p.Services[0].FixedTimeSlot, new { @class = "form-control input-sm", data_bind = "value: FixedTimeSlot" })
        @Html.ValidationMessageFor(p => p.Services[0].FixedTimeSlot, "", new { @class = "help-block" })
       <a tabindex="-1" href="javascript:void(0);"><span class="fa fa-info-circle text-info icon-ms" data-bind=""></span></a>
    </div>
</div>

类 col-md-X 为 div 定义了一个“框”。如果将锚点放置在与文本框相同的 div 中，则图标应对齐。

延伸阅读：http://getbootstrap.com/examples/grid/

【讨论】：