html - Bootstrap 标签和输入未水平对齐

Question

在表单内联类中使用 Bootstrap 标签和输入时，我发现了一个有趣的问题。标签似乎调整得比输入略高。

我只是使用基本的 razor html 助手来生成这些输入和用于搜索的 anchor 标记。

<div class="form-inline">
    @Html.LabelFor(x => x.StartDate, "From:", new { @class = "form-control input-sm" })
    @Html.TextBoxFor(x => x.StartDate, "MM-DD-YYYY", new { @class = "form-control input-sm", @id = "start-date" })
    @Html.LabelFor(x => x.EndDate, "To:", new { @class = "form-control input-sm" })
    @Html.TextBoxFor(x => x.EndDate, "MM-DD-YYYY", new { @class = "form-control input-sm", @id = "end-date" })
<a id="searchBtn" class="btn btn-primary">Search</a>

愿意提出新的解决方案来解决这个内联表单组。但对我来说，这看起来很烦人和不愉快:(

Answer 1

添加一些自定义样式，没有 Bootstrap 的默认样式。检查这个例子:

<form>
<label for="email">Email address:</label>
<input type="email" class="xinput" id="email">

<label for="pwd">Password:</label>
<input type="password" class="xinput" id="pwd">

<button type="submit" class="xsubmit">Submit</button>
 </form>

CSS:

label{border: 1px solid #ccc;
 height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;}
.xinput{height: 34px;
border: 1px solid #ccc;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;}
.xsubmit{height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555; border: none; outline: none; background-color: #008cba; color:    white;}

http://jsfiddle.net/elance/52VtD/15654/