Bootstrap 4中标签与输入框并排布局不响应式问题求助

嘿，我懂你遇到的麻烦了——窗口缩小的时候，标签和输入框挤在一起甚至重叠，对吧？这是因为你现在用的是固定宽度的列类，没针对不同屏幕尺寸做适配，咱们用Bootstrap 4自带的响应式表单方案就能搞定：

问题根源 #

你当前布局用了普通的row和固定的col-3/col-6，在小屏幕下这些宽度加起来超过容器宽度，自然就会出现覆盖。Bootstrap 4专门为表单设计了响应式布局逻辑，咱们调整一下就行。

解决方案步骤 #

1. 替换普通row为form-row：form-row是Bootstrap专为表单打造的布局类，它的内部间距更小，更适合表单元素的排列。
2. 添加响应式列类：给标签和输入区域设置多断点的列宽，比如小屏幕（sm及以下）让标签独占一行，输入框占满宽度；中等屏幕及以上保持水平布局。
3. 优化表单组结构：确保每个form-group内的元素在不同屏幕下都能合理对齐。

修改后的完整代码 #

<div class="row no-gutters">
  <div class="col-12">
    <div class="form-row">
      <div class="col-12 col-sm-4 mt-3">
        <div class="form-group row">
          <label class="col-12 col-sm-3 col-form-label">NAME</label>
          <div class="col-12 col-sm-9">
            <input class="form-control rounded-0" />
          </div>
        </div>
        <div class="form-group row">
          <label class="col-12 col-sm-3 col-form-label">NAME</label>
          <div class="col-12 col-sm-9">
            <input class="form-control rounded-0" />
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-4 mt-3">
        <div class="form-group row">
          <label class="col-12 col-sm-3 col-form-label">NAME</label>
          <div class="col-12 col-sm-9">
            <input class="form-control rounded-0" />
          </div>
        </div>
        <div class="form-group row">
          <label class="col-12 col-sm-3 col-form-label">NAME</label>
          <div class="col-12 col-sm-9">
            <input class="form-control rounded-0" />
          </div>
        </div>
        <div class="form-group row">
          <label class="col-12 col-sm-3 col-form-label">NAME</label>
          <div class="col-12 col-sm-9">
            <input class="form-control rounded-0" />
          </div>
        </div>
        <div class="form-group row">
          <label class="col-12 col-sm-3 col-form-label">NAME</label>
          <div class="col-12 col-sm-9">
            <input class="form-control rounded-0" />
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-4 mt-3">
        <div class="form-group row">
          <label class="col-12 col-sm-3 col-form-label">NAME</label>
          <div class="col-12 col-sm-9">
            <input class="form-control rounded-0" />
          </div>
        </div>
        <div class="form-group row">
          <label class="col-12 col-sm-3 col-form-label">NAME</label>
          <div class="col-12 col-sm-9">
            <textarea class="form-control rounded-0"></textarea>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

关键修改说明 #

• 外层的row换成form-row，优化表单元素的内部间距；
• 给每个外层列（原col-4）添加col-12 col-sm-4，小屏幕下每个列块独占一行，避免横向拥挤；
• 表单组内的标签和输入区域用col-12 col-sm-3/col-12 col-sm-9组合：小屏幕（宽度<576px）时标签和输入框自动堆叠，各自占满100%宽度；中等屏幕及以上保持3:9的水平布局，完美适配不重叠。

这样调整后，你的表单在任何屏幕尺寸下都能正常显示，小屏幕自动切换为垂直布局，大屏幕保持水平排列啦！

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