Bootstrap内联表单字段不对齐顶部和底部

Question

我遇到了问题，如下图所示：

显然，我希望状态下拉列表与其他两个控件的顶部和底部对齐。这是我用来生成屏幕这一部分的代码：

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

相关的CSS：

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

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

所有其他CSS都是标准的Bootstrap 3 CSS类。

如何获得我在这里寻找的路线？

增加：http://jsfiddle.net/mikemahony/2E9Sz/

Answer 1

首先，我会说你的输入控件样式看起来不像bootstrap。原因是您使用的form-control-inline甚至没有出现在bootstrap-3.0中（请确保您不要与bootstrp 2.3混淆）

如果你正确使用bootstrap建议，你就不会遇到这样的问题。

但这是这个类的问题

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

在bootstrap.min.css文件中定义。 如果你删除这些填充，你会得到预期的输出。您可以使用padding:0在自定义css文件中覆盖此类。

.input-sm
{
  padding: 0;
}

Js Fiddle Demo

Answer 2

您可以将填充：0px 添加到 id = ContentPlaceHolder1_ddlShipToState 的元素。

填充导致问题：添加了5px 填充。