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

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

1 个答案: