ASP.NET Core页面搜索组件Bootstrap样式不符合预期如何修复？

问题原因及修复方案 #

1. 核心问题点 #

• 错误使用form-check-inline类：该类专为复选框/单选框的行内布局设计，不适用于普通表单控件的水平排列，会导致默认间距丢失
• 栅格分配不合理：中等屏幕下三个列均设置为col-md-2，总宽度仅占行宽的50%，剩余空间未被利用导致布局拥挤
• 未使用Bootstrap内置间距工具类：控件之间没有设置外边距，导致元素紧贴
• 右对齐未生效是因为列宽度不足，且没有使用flex布局的对齐属性

2. 修复后的代码 #

<div class="container">
    <form asp-action="Index" method="get">
        <div class="row align-items-center mb-3">
            <!-- 左侧搜索区域：自动占剩余宽度，内容居中 -->
            <div class="col d-flex justify-content-center align-items-center gap-2">
                <label for="holiday">Find by Holiday</label>
                <input type="text" class="form-control w-auto" name="SearchString" value="@ViewData["CurrentFilter"]" />
                <input type="submit" value="Search" class="btn btn-info" />
                <a class="btn btn-link" asp-action="Index">Back to Full List</a>
            </div>
            <!-- 右侧按钮区域：宽度自适应，内容右对齐 -->
            <div class="col-auto">
                <a class="btn btn-info" asp-action="Create">Create New</a>
            </div>
        </div>
    </form>
</div>

如果使用的是Bootstrap 4版本，把gap-2替换为给每个子元素加me-2类即可实现间距效果

3. 关键修改说明 #

• 用container替换无用的center类，Bootstrap的container会自动处理水平边距
• 用d-flex + justify-content-center实现搜索区域的水平居中，自动适配不同屏幕宽度
• 搜索输入框加w-auto避免占满整行，保持和标签、按钮的紧凑适配
• 右侧按钮用col-auto让列宽度仅适应内容大小，自然靠最右侧排列
• 加align-items-center让整行所有元素垂直居中对齐

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