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

Question

I am using using bootstrap in my project. I am creating an edit form in which i have to use some info icons next to input field and in this task i am facing an alignment problem. Please check this image:

Notice the huge gap b/w input field and icon and the same problem is with selectlist and duration field. The html code of this image is:

<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>

I am new with bootstrap and very week in css, so i do not want to write css, is this problem can be solved using bootsrap classes ??

Answer 1

Try this

<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>

The classes col-md-X define a "box" for the div. If you place the anchor inside the same div as the textbox, the icon should align.

Further reading: http://getbootstrap.com/examples/grid/