ASP.Net Core页面div间距设置及卡片与搜索筛选器对齐布局咨询

直接替换原有页面代码即可实现需求，左侧保留地址卡片，右侧筛选器固定每行2个、共3行排列，同时修复对齐问题：

<div class="container-fluid pt-3">
    <div class="row">
       <!-- 左侧地址卡片区域 -->
       <div class="col-md-3">
         <div class="card border-info mb-3" style="max-width: 12rem;">
            <div class="card-header text-center"><b>Current Shipping Address</b></div>
            <div class="card-body text-info" style="font-size: 14px;">
                <b><h7 class="card-title">Location</h7></b>
                <p class="card-text">
                    @Html.DisplayFor(model => model.CustomerData.Location)
                    <br />@Html.DisplayFor(model => model.CustomerData.Address1)
                </p>
            </div>
        </div>
      </div>

      <!-- 右侧筛选区域 -->
      <div class="col-md-9">
        <section class="search-sec">
            <form asp-action="Index" method="get">
                <!-- 第一行筛选：菌株名称、基因型 -->
                <div class="row g-3 mb-3">
                    <div class="col-md-6">
                        <label for="name" class="form-label">Strain Name</label>
                        <input type="text" class="form-control" name="name" value="@ViewData["name"]" />
                    </div>
                    <div class="col-md-6">
                        <label for="genotype" class="form-label">Genotype</label>
                        <input type="text" class="form-control" name="genotype" value="@ViewData["genotype"]" />
                    </div>
                </div>
                <!-- 第二行筛选：年龄、年龄区间 -->
                <div class="row g-3 mb-3">
                    <div class="col-md-6">
                        <label for="age" class="form-label">Age</label>
                        <select class="form-control" name="age">
                            ......
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="minAge" class="form-label">Age range between</label>
                        <div class="d-flex gap-2 align-items-center">
                            <select class="form-control flex-grow-1" name="minAge">
                                .......
                            </select>
                            <span>and</span>
                            <select class="form-control flex-grow-1" name="maxAge">
                                ........
                            </select>
                        </div>
                    </div>
                </div>
                <!-- 第三行筛选：性别、库存编号 -->
                <div class="row g-3 mb-3">
                    <div class="col-md-6">
                        <label for="sex" class="form-label">Sex</label>
                        <select class="form-control" name="sex">
                            ......
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="stockNumber" class="form-label">Find by Stock Number</label>
                        <input type="text" class="form-control" name="stockNumber" value="@ViewData["stockNumber"]" />
                    </div>
                </div>
                <!-- 操作按钮 -->
                <div class="row">
                    <div class="col-12">
                        <input type="submit" value="Search" class="btn btn-default" />
                        <span class="mx-2">|</span>
                        <a class="btn btn-link" asp-action="Index">Return to Original List</a>
                    </div>
                </div>
            </form>
        </section>
       </div>
   </div>
 </div>

核心调整说明 #

• 筛选项统一使用col-md-6类，中等及以上屏幕宽度下固定每行2个，小屏幕自动堆叠适配移动端
• 所有表单元素使用Bootstrap原生form-label、form-control样式，自动实现标签与控件的对齐效果
• 用g-3控制同行列间距、mb-3控制行间距，消除原代码p-0导致的元素挤压错位问题
• 年龄区间的两个下拉框用弹性布局控制横向排列，自动适配宽度不会溢出
• 移除冗余的嵌套container-fluid层，减少网格嵌套层级避免布局冲突

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