如何用Bootstrap构建分栏式团队击杀分数更新表单

根据你的需求，我调整了代码，用Bootstrap原生类实现两个输入区域的布局，移除了内联样式，保证响应式适配：

<!-- 先确保引入Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<form class="container py-4">
  <!-- 表单行容器 -->
  <div class="row justify-content-center align-items-center g-3">
    <!-- 团队选择区域 -->
    <div class="col-sm-6 col-md-4 text-center">
      <label for="teamSelect" class="form-label fw-bold">选择团队</label>
      <select id="teamSelect" class="form-select form-select-sm">
        <option value="team1">Team 1</option>
        <option value="team2">Team 2</option>
      </select>
    </div>
    <!-- 击杀数输入区域 -->
    <div class="col-sm-6 col-md-3 text-center">
      <label for="killInput" class="form-label fw-bold">击杀数</label>
      <input type="number" id="killInput" name="team_kill" placeholder="输入击杀数" class="form-control form-control-sm w-75 mx-auto">
    </div>
    <!-- 提交按钮（可选） -->
    <div class="col-12 text-center mt-3">
      <button type="submit" class="btn btn-primary">更新分数</button>
    </div>
  </div>
</form>

关键调整说明： #

• 用container和row配合justify-content-center让表单居中，g-3控制列间距
• 用form-select-sm和form-control-sm统一控件高度，替代内联的height:30px
• 用w-75 mx-auto控制输入框宽度，替代内联的width:70px，同时保持居中
• 添加表单标签<label>，提升页面可访问性
• 响应式布局：移动端（sm）下两个区域堆叠，桌面端（md）下并排显示
• 移除所有内联样式，完全依赖Bootstrap类维护样式，便于后续修改

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