如何使用Bootstrap 5实现输入框与按钮同行？现有代码无效

Bootstrap 5提供了两种简单的方式实现这个需求，不需要额外自定义样式：

方法一：使用官方input-group组件（推荐） #

这是Bootstrap专为输入框+按钮/附加元素设计的组件，结构更规范且适配性更好：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
    rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous">
 
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <form action="" method="get">
                <div class="input-group">
                    <input type="text" name="search_query" class="form-control">
                    <button type="submit" class="btn btn-primary btn-sm">Search</button>
                </div>
            </form>
        </div>
    </div>
</div>

只需把输入框和按钮包裹在input-group容器内，就能自动实现同行排列，且会自动适配不同屏幕尺寸。

方法二：使用Flex布局类 #

利用Bootstrap的flex工具类快速实现自定义排列：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
    rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous">
 
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <form action="" method="get" class="d-flex gap-2">
                <input type="text" name="search_query" class="form-control flex-grow-1">
                <button type="submit" class="btn btn-primary btn-sm align-self-center">Search</button>
            </form>
        </div>
    </div>
</div>

• d-flex：将表单容器转为flex布局，子元素自动同行排列
• flex-grow-1：让输入框占据容器内剩余的所有空间
• gap-2：给输入框和按钮之间添加固定间距（可选）
• align-self-center：让按钮与输入框垂直居中对齐（可选）

内容的提问来源于stack exchange，提问作者Adamu Abdulkarim Dee