如何在ASP.NET Core MVC视图中实现三个搜索筛选框均匀排列

我已经按照ASP.NET Core MVC入门教程完成了电影管理示例项目的开发，新增了2个下拉筛选框和1个搜索字符串输入框的功能，现在需要让这三个搜索控件在输出视图的顶部均匀分布，但一直未找到实现方法。

我为了方便调试，新建了~Views\Shared\_My_Layout.cshtml文件并在_ViewStart.cshtml中引用，引用代码如下：

@{
    ViewBag.Title = "Home Page";
    Layout = "~/Views/Shared/_My_Layout.cshtml";
}

经测试该布局文件生效，所有调试都基于此文件而非VS2019中默认的_Layout.cshtml。注意_ViewStart中的路径引用使用正斜杠，和Windows路径的反斜杠存在格式差异，但正斜杠是_ViewStart.cshtml唯一支持的写法，我也通过修改布局文件的样式输出验证过文件引用正常。

我在修改_My_Layout.cshtml时发现，视图上的"All"和"Title"标签来自~Views\Movies\Index.cshtml，但浏览器的页面展示主要受_My_Layout中以下代码控制：

<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container">
            <a class="navbar-brand" asp-area="" asp-controller="Movies" asp-action="Index">testbase1</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

上述代码拷贝自原始_Layout.cshtml，我查阅了Bootstrap Navbar文档，多次修改_My_Layout.cshtml中以<button class="navbar-toggler">开头的代码行，按照文档调整target和aria相关参数都没有效果，也未找到适配Web应用场景的同类案例。

问题补充 #

我的开发者工具输出如下：

我确认_My_Layout.cshtml中的上述代码是相关逻辑段，代码引用了Bootstrap Navbar form-inline，但找不到适配本场景的使用指南。我已经下载了最新的bootstrap 5.02并在布局中引用，最初怀疑是bootstrap预设的列参数控制了控件宽度，打算修改bootstrap网格配置。

思路调整 #

我精简了_My_Layout中的冗余代码逐行测试，发现只有@RenderBody()和数据库表格输出、控件展示相关，因此筛选框和表格的样式配置只能在Index视图中修改，需要在保留功能的前提下实现三个控件的均匀布局，请问有没有相关解决方案或者参考文档？

_My_Layout.cshtml完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    
<!-- for this file _My_Layout.cshtml using files from a working dir-->
    <link rel="stylesheet" href="~/wrk/bootstrap.min.css" />
    <link rel="stylesheet" href="~/wrk/site.css" />

</head>
<body>
    <header>
        <div class="container">
            <!-- this code determines position & appearance of testbase1 Home Privacy Hello xxx@email Logout-->
            <!-- testbase1 controlled by Movies, Privacy by Home, login controlled by asp-area Identity-->
            <nav class="navbar navbar-expand-lg navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3" />
            <a class="navbar-brand" asp-area="" asp-controller="Movies" asp-action="Index">testbase1</a>
            <nav class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1">
                    <!-- this code for separation (spacing) of login text at top of page -->
                    <li class="nav-item"></li>
                </ul>
                <partial name="_LoginPartial" />
            </nav>
        </div>
    </header>
    <!-- this code responsible for main output - without it no body to page. Top & bottom bar navigation links only -->
    <div class="container">
        <main role="main" class="pb-6">
            @RenderBody()
        </main>
    </div>
    <!-- removed js script source refs leaving self explainatory footer code-->
    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2021 - testbase1 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    
    <!-- required for Edit functionality -->
    @await RenderSectionAsync("Scripts", required: false) 
</body>
    </html>

最终实现方案 #

后续我已通过以下代码实现需求：将展示代码包裹在container中保留asp输入类型，新增hidden输入类型解决筛选框旁的幽灵链接导致的列对齐问题，实现代码如下：

<form asp-controller="Movies" asp-action="Index" method="get">
            <container>
                <div class="row">
                    <div class="col-sm-4">
                        <input type="submit" value="Filter"/>
                        Title: <input type="text" asp-for="SearchString" />
                    </div>

                    <div class="col-sm-4">
                        <input type="hidden" value="" class="btn btn-default"/>
                        <select asp-for="MovieGenre" asp-items="Model.Genres">
                            <option value="">All</option>
                        </select>
                    </div>

                    <div class="col-sm-4">
                        <input type="hidden" value="" class="btn btn-default" />
                        <select asp-for="MovieRating" asp-items="Model.Rating">
                            <option value="">All</option>
                        </select>
                    </div>

                </div>
            </container>
        </form>

实现效果如下图：

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