Getting an odd space between input-group-addon span and form-control

Viewed 2460

I am new to Bootstrap, and am having an issue when using input-group and input-group-addon. I have tried the best I can to find someone else having the same problem, to no avail.

The input-group looks great on md size screen, but refuses to line up with the form control on any other screen size.

md:

md screen size

lg:

lg screen size

xs & sm

xs & sm screen size

Here is my code:

<div class="form-group col-md-6 col-lg-4">
    @Html.LabelFor(model => model.Weight, new { @class = "control-label col-md-6" })
    <div class="input-group col-md-6">
        @Html.EditorFor(model => model.Weight, new { @class = "form-control" })
        <span class="input-group-addon">lbs</span>
        @Html.ValidationMessageFor(model => model.Weight)
    </div>
</div>

I attempted pulling the addon span using "col-lg-pull-2", this had no effect. Any ideas?

1 Answers
Related