使用Bootstrap 5实现文本框与按钮等高及响应式换行的方法

要实现输入框与按钮高度完全一致，同时窗口缩小时按钮自动换行，可以通过以下调整实现：

关键修改点 #

• 统一尺寸类：Bootstrap的btn-lg按钮需要对应form-control-lg的输入框，才能保证高度一致。
• 使用Flex布局实现响应式换行：用Bootstrap的flex布局类替代inline-block，自动处理换行逻辑，同时控制元素间距。

修改后的完整代码 #

<div style="margin-top: 30%" class="text-center">
    <h1>Let's get started...</h1>
    <!-- 用flex容器包裹输入框和按钮，实现响应式换行 -->
    <div class="d-flex flex-wrap justify-content-center gap-3">
        <input id="form-input" type="text" class="form-control form-control-lg w-25" placeholder="Search for a prefix" />
        <button id="form-button" type="submit" class="btn btn-primary btn-lg">Find Numbers</button>
    </div>
</div>

细节说明 #

1. 高度对齐：给输入框添加form-control-lg类，和按钮的btn-lg匹配，Bootstrap会为两者设置统一的内边距、行高，确保高度完全一致。
2. 自动换行：外层的d-flex flex-wrap会让容器内的元素在空间不足时自动换行，justify-content-center保证元素始终水平居中，gap-3替代原有的mb-3，统一控制输入框和按钮的间距（包括水平和垂直方向）。
3. 移除冗余样式：删除了输入框上的display: inline-block，flex布局已经能满足排列需求。

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