Bootstrap 5中表单输入框与提交按钮的同行布局问题

问题分析 #

你的代码存在两个核心问题导致元素无法横向排列：

1. HTML语法错误：<label>标签使用了错误的闭合标签</span>，应改为</label>
2. 布局结构问题：按钮位于form-group外部，且form-group默认是块级容器，输入框会独占一行

解决方案 #

以下提供两种基于Bootstrap的实现方式，均可实现标签、输入框、按钮在同一行显示：

方式1：使用Flex布局（推荐，适配Bootstrap 4+）

通过给form-group添加flex相关类，快速实现横向排列：

<div class="row">
  <div class="col-lg-6">
    <div class="form-group d-flex align-items-center">
      <label class="col-md-6" for="ip">Añadir dirección IP</label>
      <input type="text" id="ip" name="ip" class="form-control form-control-sm mr-2" placeholder="Buscar por Nombre" required>
      <button type="submit" class="btn btn-info waves-effect waves-light text-white btn-sm">Escribir IP</button>
    </div>
  </div>
</div>

关键改动：

• 修正<label>标签的闭合错误
• 给form-group添加d-flex align-items-center，让内部元素横向排列且垂直居中
• 输入框添加mr-2类，增加与按钮的间距
• 将按钮移入form-group容器内，确保在同一布局上下文

方式2：使用栅格系统细分列

适合需要精确控制各元素宽度占比的场景：

<div class="row">
  <div class="col-lg-6">
    <div class="form-group row align-items-center">
      <label class="col-md-4 col-form-label" for="ip">Añadir dirección IP</label>
      <div class="col-md-6">
        <input type="text" id="ip" name="ip" class="form-control form-control-sm" placeholder="Buscar por Nombre" required>
      </div>
      <div class="col-md-2">
        <button type="submit" class="btn btn-info waves-effect waves-light text-white btn-sm w-100">Escribir IP</button>
      </div>
    </div>
  </div>
</div>

关键改动：

• 给form-group添加row类，启用栅格列划分
• 为标签、输入框容器、按钮容器分配对应宽度的col-md-*类
• 按钮添加w-100类，让其占满所在列宽度，布局更规整

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