如何让含双元素的div行在移动端实现响应式布局？

完全不需要JavaScript，结合Bootstrap的响应式特性和简单的CSS调整就能解决移动端输入框重叠、行间距不足的问题。以下是具体实现思路和代码示例：

核心原因分析 #

Bootstrap的col-md-6类默认在屏幕宽度小于768px（移动端）时会自动切换为100%宽度并换行，出现重叠大概率是自定义的row间距样式在移动端没有适配，或者元素的margin/padding冲突导致。

方法1：使用Bootstrap自带的响应式间距类 #

Bootstrap提供了一套响应式间距工具类，能精准控制不同屏幕尺寸下的间距，无需额外写CSS：

<div class="container">
  <form>
    <!-- 桌面端行间距：mb-md-4 仅在md及以上屏幕生效 -->
    <div class="row mb-md-4">
      <!-- 移动端下保留底部间距，桌面端移除：mb-3 mb-md-0 -->
      <div class="col-md-6 mb-3 mb-md-0">
        <label for="name" class="form-label">姓名</label>
        <input type="text" class="form-control" id="name">
      </div>
      <div class="col-md-6 mb-3 mb-md-0">
        <label for="email" class="form-label">邮箱</label>
        <input type="email" class="form-control" id="email">
      </div>
    </div>
    <div class="row mb-md-4">
      <div class="col-md-6 mb-3 mb-md-0">
        <label for="phone" class="form-label">电话</label>
        <input type="tel" class="form-control" id="phone">
      </div>
      <div class="col-md-6 mb-3 mb-md-0">
        <label for="subject" class="form-label">主题</label>
        <input type="text" class="form-control" id="subject">
      </div>
    </div>
  </form>
</div>

• mb-md-4：仅在屏幕宽度≥768px时给row添加底部间距，对应你需要的15px左右（Bootstrap的mb-4默认是1.5rem，约24px，可根据需求换成mb-md-3对应1rem/16px）。
• mb-3 mb-md-0：移动端给每个col添加底部间距，桌面端移除，避免重复间距。

方法2：自定义CSS媒体查询 #

如果不想依赖Bootstrap的工具类，也可以自己写媒体查询控制样式：

/* 桌面端给row设置底部间距 */
@media (min-width: 768px) {
  .form-row {
    margin-bottom: 15px;
  }
}

/* 移动端给每个col设置底部间距，自动换行由Bootstrap栅格默认实现 */
@media (max-width: 767px) {
  .col-md-6 {
    margin-bottom: 15px;
  }
  /* 可选：移除最后一个col的底部间距，避免多余空白 */
  .col-md-6:last-child {
    margin-bottom: 0;
  }
}

对应的HTML只需保证结构正确：

<div class="container">
  <form>
    <div class="row form-row">
      <div class="col-md-6">
        <label for="name" class="form-label">姓名</label>
        <input type="text" class="form-control" id="name">
      </div>
      <div class="col-md-6">
        <label for="email" class="form-label">邮箱</label>
        <input type="email" class="form-control" id="email">
      </div>
    </div>
    <div class="row form-row">
      <div class="col-md-6">
        <label for="phone" class="form-label">电话</label>
        <input type="tel" class="form-control" id="phone">
      </div>
      <div class="col-md-6">
        <label for="subject" class="form-label">主题</label>
        <input type="text" class="form-control" id="subject">
      </div>
    </div>
  </form>
</div>

关键提示 #

• 确保表单外层包裹了container或container-fluid，这是Bootstrap栅格系统正常工作的前提。
• 不要给col元素设置固定高度或负margin，这会破坏响应式堆叠的布局逻辑。

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