如何在Bootstrap中让两个div并排显示？已尝试col-xs-6无效

你的代码核心问题是栅格结构错误：.col必须直接作为.row的子元素才能触发Bootstrap的并排布局，而你在.row内部嵌套了.container-md，导致列布局失效。另外Bootstrap 5已弃用col-xs-*，改用col-*适配超小屏幕。

以下是修正后的完整代码，关键改动点：

• 移除.row内部的.container-md，将表单包裹在新的.row中，让两个.col直接成为其子元素
• 为列添加col-12 col-md-6类，实现小屏幕堆叠、中等及以上屏幕并排的响应式效果
• 修正无效类名（如form-control-lg-mb2拆分为form-control-lg mb-2）
• 修复重复的id属性（HTML要求id全局唯一）

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="bg-danger w-100">
      <form class="row g-3">
        <!-- 左侧列 -->
        <div class="col-12 col-md-6">
          <div class="text-center">
            <label for="job-name">Type job name</label><br>
            <input type="text" class="form-control-lg border-success text-center rounded-circle" id="job-name" placeholder="Job-name">
          </div>
          
          <div>
            <label for="first-name">Type first name</label><br>
            <input type="text" class="border-dark form-control-lg mb-2 mt-2 ms-2 text-center rounded-right" id="first-name" placeholder="first Name" required>
          </div>
          
          <div>
            <label for="last-name">Type last name</label><br>
            <input type="text" class="border-dark form-control-lg mb-2 ms-2 text-center rounded-right" id="last-name" placeholder="Enter your last Name" required>
          </div>
          
          <div>
            <label for="phone-number">Type Phone number</label><br>
            <input type="text" class="border-dark form-control-lg mb-2 ms-2 rounded-right" id="phone-number" placeholder="Enter your Number">
          </div>
          
          <div>
            <label for="email">Type Email</label><br>
            <input type="email" class="border-dark form-control-lg mb-2 ms-2 rounded-right" id="email" placeholder="Enter your Email">
          </div>
          
          <div>
            <label for="age">Age</label><br>
            <input type="date" class="border-dark form-control-lg mb-2 ms-2 rounded-right" id="age" placeholder="Enter your birth date">
          </div>
        </div>
        
        <!-- 右侧列 -->
        <div class="col-12 col-md-6">
          <div class="text-end">
            <label for="right-age">Age</label><br>
            <input type="date" class="border-dark form-control-lg mb-2 ms-2 rounded-right" id="right-age" placeholder="Enter your birth date">
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

额外说明：

• 使用g-3类给表单行添加间距，替代手动的<br>换行，更符合Bootstrap规范
• 把ml-2替换为ms-2（Bootstrap 5中使用ms/me替代ml/mr表示左右边距）
• 为邮箱输入框设置type="email"，符合HTML语义化

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