ASP.NET Core下基于Bootstrap的搜索筛选组件样式设置问题

优化方案 #

核心问题定位 #

现有代码的核心问题有2个：

1. Bootstrap栅格系统单行列宽总和不能超过12，你当前col-lg的总宽度加起来为17，超出部分会自动换行
2. 没有使用Bootstrap自带的表单样式类，label和输入控件默认都是块级元素，会自动上下堆叠导致布局错乱

具体优化步骤 #

• 重新分配大屏栅格宽度，保证总宽度为12，同时保留col-sm-12实现小屏自动堆叠的响应式效果
• 给所有input、select元素添加form-control类，统一输入控件样式
• 给外层行添加align-items-center类，让所有控件垂直居中对齐
• 搭配g-2类给列之间添加合适的间距，避免控件过于拥挤
• 如果需要标签和输入框在同一行，可以给单个筛选器内部套一层flex布局，实现横向排列

优化后代码示例 #

<section class="search-sec py-3">
 <div class="container">
    <form asp-action="Index" method="get">
        <!-- 外层行加垂直居中、列间距 -->
        <div class="row align-items-center g-2">
            <!-- 名称输入 -->
            <div class="col-lg-2 col-md-2 col-sm-12">
                <input class="form-control" type="text" name="name" placeholder="Name" value="@ViewData["name"]" />
            </div>
            <!-- 年龄单选 -->
            <div class="col-lg-2 col-md-2 col-sm-12">
                <div class="d-flex align-items-center gap-1">
                    <label for="age" class="mb-0">Age</label>
                    <select class="form-control" name="age">
                        <!-- 选项内容 -->
                    </select>
                </div>
            </div>
            <!-- 年龄区间 -->
            <div class="col-lg-3 col-md-3 col-sm-12">
                <div class="d-flex align-items-center gap-1 flex-wrap">
                    <label for="minAge" class="mb-0">Age range between</label>
                    <select class="form-control w-auto" name="minAge">
                        <!-- 选项内容 -->
                    </select>
                    <span>and</span>
                    <select class="form-control w-auto" name="maxAge">
                        <!-- 选项内容 -->
                    </select>
                </div>
            </div>
            <!-- 性别 -->
            <div class="col-lg-1 col-md-2 col-sm-12">
                <div class="d-flex align-items-center gap-1">
                    <label for="sex" class="mb-0">Sex</label>
                    <select class="form-control" name="sex">
                        <!-- 选项内容 -->
                    </select>
                </div>
            </div>
            <!-- 库存编号 -->
            <div class="col-lg-2 col-md-2 col-sm-12">
                <div class="d-flex align-items-center gap-1">
                    <label for="stockNumber" class="mb-0">Stock No.</label>
                    <input class="form-control" type="text" name="stockNumber" value="@ViewData["stockNumber"]" />
                </div>
            </div>
            <!-- 操作按钮 -->
            <div class="col-lg-2 col-md-3 col-sm-12">
                <div class="d-flex gap-2 align-items-center">
                    <input type="submit" value="Search" class="btn btn-primary" />
                    <a class="btn btn-link" asp-action="Index">Clear</a>
                </div>
            </div>
        </div>
   </form>
 </div>
</section>

补充说明 #

如果需要更紧凑的样式，可以给年龄区间的select添加w-auto类让宽度自适应内容，避免多余空白；小屏幕下会自动堆叠为全宽布局，不影响移动端使用。

你之前的异常效果参考：

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