Bootstrap inline form field not aligning top and bottom

Question

I am having a problem as indicated in the following image:

Obviously I want the state dropdown to align with the top and bottom of the other two controls. Here is the code I have used to generate this section of the screen:

<div class="form-group">
                    <label for="txtShipToCity" class="small-text-label"><strong>City St Zip:</strong></label><br />
                    <asp:TextBox ID="txtShipToCity" runat="server" CssClass="form-control-inline input-sm width-100 form-fixer"></asp:TextBox>
                    <asp:DropDownList id="ddlShipToState" runat="server" Font-Size="small" CssClass="form-control-inline input-sm width-50 form-fixer" Height="24px" ></asp:DropDownList>
                    <asp:TextBox ID="txtShipToZip" runat="server" CssClass="form-control-inline input-sm width-50 form-fixer" maxlength="5" ></asp:TextBox>
                </div>

The CSS that is relevant:

input.form-fixer{
    padding: 1px !important;
    font-size: x-small !important;
    height: 24px !important;
}

.width-50 {
    width: 50px !important;
}

All other CSS are standard Bootstrap 3 CSS classes.

How do I get the alignment I am looking for here?

ADDED: http://jsfiddle.net/mikemahony/2E9Sz/

Answer 1

First of all I would say your input controls styles doesn't have look like bootstrap. The reason is you are using form-control-inline which didn't even present in bootstrap-3.0 (make sure you not confusing with bootstrp 2.3)

If you use bootstrap recommendation correctly, you won't get such problem.

But here is the problem with this class

.input-sm
{
  padding: 5px 10px;
}

which defines in bootstrap.min.css file. if you remove these padding you get your expected output. You can overwrite this class in your custom css file with padding:0 .

.input-sm
{
  padding: 0;
}

Js Fiddle Demo

Answer 2

You can add padding: 0px to element with id=ContentPlaceHolder1_ddlShipToState .

padding is causing the issue: 5px padding is added.