兩個同軸文本框使用與其他控件正確對齊引導

Question

我一直在使用引導v3.3.4

在一個線上的兩個表單控件和正確對齊其他控制能否請你幫我在調整前兩個控件（掇下來和文本框）與底部文本框。 預先感謝您

我想在這裏使用的jsfiddle複製對齊問題：https://jsfiddle.net/bswn9o8g/

還張貼在這裏的圖片：http://postimg.org/image/4iawvs0zn/ 這裏是HTML代碼

<div class="form-horizontal"> 
    <h4>SearchVM</h4> 
    <hr /> 
    @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
    <div class="form-group form-inline"> 
     @Html.LabelFor(model => model.searchBy, htmlAttributes: new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      @Html.EnumDropDownListFor(model => model.searchBy, "Search By", htmlAttributes: new { @class = "form-control" }) 
      @Html.TextBox("searchByVal", null, htmlAttributes: new { @placeholder = "SID/PID ", @class = "form-control" }) 
     </div> 

    </div> 

    <div class="form-group"> 
     @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @placeholder = "First Name", @class = "form-control" } }) 
     </div> 
    </div> 

    <div class="form-group"> 
     @Html.LabelFor(model => model.MiddleName, htmlAttributes: new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      @Html.EditorFor(model => model.MiddleName, new { htmlAttributes = new { @placeholder = "Middle Name", @class = "form-control" } }) 
     </div> 
    </div> 

    <div class="form-group"> 
     @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @placeholder = "Last Name", @class = "form-control" } }) 
     </div> 
    </div> 

    <div class="form-group"> 
     @Html.LabelFor(model => model.DOB, htmlAttributes: new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      @Html.EditorFor(model => model.DOB, new { htmlAttributes = new { @placeholder = "Birth Date", @class = "form-control" } }) 
     </div> 
    </div> 

    <div class="form-group"> 
     @Html.LabelFor(model => model.CauseNumber, htmlAttributes: new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      @Html.EditorFor(model => model.CauseNumber, new { htmlAttributes = new { @placeholder = "Cause#", @class = "form-control" } }) 
     </div> 
    </div> 

    <div class="form-group"> 
     <div class="col-md-offset-2 col-md-10"> 
      <input type="submit" value="Create" class="btn btn-default" /> 
     </div> 
    </div> 
</div> 

Answer 1

這不是從很清楚你的問題你想達到什麼目的，但我想你想讓你的下拉菜單和文本框內聯，並與你的表單的其他控件對齊。

這裏是你在找什麼：

 <div class=" form-group form-inline"> 
    <div class="input-group"> 
<span class="input-group-addon">Search by</span> 
    <select class="form-control" data-val="true" data-val-required="The Search By field i1 required." id="searchBy" name="searchBy"> 
    <option selected="selected" value="0">SID</option> 
    <option value="1">PID</option> 
    </select> 
    </div> 
    </div> 

和這裏的Fiddle link

UPDATE： 這裏是什麼找你找：

<form class="form-horizontal"> 
     <h4>SearchVM</h4> 


     <div class="form-group"> 
     <label class="control-label col-md-2" for="email">Email:</label> 
     <div class="col-md-5"> 
        <select class="form-control" data-val="true" data-val-required="The Search By field is required." id="searchBy" name="searchBy"><option selected="selected" value="0">Search By</option> 
<option value="1">SID</option> 
<option value="2">PID</option> 
</select> 
     </div> 
<div class="col-md-5"> 
         <input class="form-control" id="searchByVal" name="searchByVal" placeholder="SID/PID " type="text" value="" /> 
     </div> 
... 

而這裏的Fiddle