ASP.NET MVC Bootstrap 表单控件未正确对齐

Question

在我关注的ASP.NET MVC Core 项目view 中，我想在同一行显示input，其对应的label 和提交按钮Add 控件。但它们显示在三个单独的行中，为什么？。我怎样才能让它们显示在同一行（请注意下拉控件正确在同一行显示其标签和提交按钮Go）。 注意：可能不相关 - 但我们知道标签的内容来自相应模型的数据注释。

查看：

<div class="col-md-9">

    <form asp-controller="myControllerName" asp-action="myTestAction" method="post" class="form-horizontal">
        <hr />
        <div asp-validation-summary="All" class="text-danger"></div>
        <div class="form-group">
            <div class="col-md-9">
                <label asp-for="SelectedYear" class="control-label"></label>
                <select asp-for="SelectedYear" asp-items="Model.lstYears"></select><button type="submit" class="btn btn-info btn-xs">GO</button>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-9">
                <label asp-for="testDesc" class="control-label"></label>
                <input asp-for="testDesc" class="form-control"/><button type="submit" class="btn btn-info btn-xs">Add</button>
            </div>
        </div>
    </form>
</div>

以上视图的页面显示快照

更新：

根据用户@RatHat 的建议，我已经能够内联显示三个控件。但是，仍然为什么它们不像其他三个下拉控件那样左对齐。新展示：

Answer 1

使用.form-horizontal时，需要指定每个元素应覆盖的列数：

<div class="form-group">
    <!-- add the number of columns that the label should use -->
    <label asp-for="testDesc" class="control-label col-sm-2"></label>
    <!-- add the number of columns that the input should use -->
    <div class="col-sm-8">
        <input asp-for="testDesc" class="form-control">
    </div>
    <!-- add the number of columns that the Add button should use -->
    <div class="col-sm-2">
        <button type="submit" class="btn btn-info btn-xs">Add</button>
    </div>
</div>