ブートストラップのラベルと入力が水平に整列しない

Question

フォームインラインクラスでブートストラップのラベルと入力を使用して遊んでいるときに興味深い問題が見つかりました。ラベルは入力よりわずかに高く調整されているようです。

私はこれらの入力と検索のアンカータグを生成するために基本的なひげ剃りのHTMLヘルパーを使用しています。

<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

は、ブートストラップのデフォルトのスタイリングずに、いくつかのカスタムスタイルを追加します。この例を確認します。

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

を