如何使用Bootstrap让C# Dropdownlist与提交按钮在同一行显示？

问题原因 #

你当前的布局逻辑错误点在于：d-flex flex-row 弹性布局类被添加到了 form 标签的外层容器上，弹性布局仅能作用于直接子元素（也就是你代码里唯一的 form 标签），而 form 作为块级元素，其内部的两个子容器默认仍为垂直流式排列，因此无法实现同行效果。

解决方法 #

两种可行修改方案任选其一即可：

• 方案1：将弹性布局类添加到 form 标签上，让form内部的子元素直接受弹性布局控制
  修改后代码如下：

<div>
@using (Html.BeginForm(null, null, FormMethod.Post, new { @class = "d-flex flex-row" }))
{
    <div class="p-2">
        @Html.DropDownList("id", ((SelectList)ViewBag.ProjectName), "- Select project -", new { @class = "form-select" })
    </div>
    <div class="p-2 align-self-center">
        <input type="submit" value="Choose this project" asp-action="ViewTickets" class="btn btn-primary" />
    </div>
}
</div>

注：align-self-center 类可实现提交按钮和下拉列表的垂直居中对齐，不需要可以删除。

• 方案2：在form内部新增弹性布局容器，包裹两个元素
  修改后代码如下：

<div>
@using (Html.BeginForm())
{
    <div class="d-flex flex-row">
        <div class="p-2">
            @Html.DropDownList("id", ((SelectList)ViewBag.ProjectName), "- Select project -", new { @class = "form-select" })
        </div>
        <div class="p-2 align-self-center">
            <input type="submit" value="Choose this project" asp-action="ViewTickets" class="btn btn-primary" />
        </div>
    </div>
}
</div>

内容的提问来源于stack exchange，提问作者tm607