使用引导程序与其他控件正确对齐的两个内联文本框

Question

我在一行中有两个表单控件，其他控件使用 Bootstrap 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

更新： 这就是您要查找的内容：

<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