Bootstrap表单输入框水平居中问题求助：移动端需堆叠显示

嘿，我来帮你搞定这个问题！结合你提到的row布局需求，咱们可以用Bootstrap的网格系统搭配几个实用类来轻松实现效果，具体操作如下：

核心思路 #

1. 水平居中：利用Bootstrap的mx-auto类让输入框所在的列在row内自动左右居中，同时给列设置响应式宽度，避免输入框过宽或过窄。
2. 移动端堆叠：Bootstrap网格系统默认在小屏幕下会让列自动占满整行宽度，自然实现堆叠效果，咱们只需要确保使用了响应式列类就行。

代码示例 #

<div class="container">
  <div class="row">
    <!-- 第一个输入框容器 -->
    <div class="col-md-6 mx-auto mb-3">
      <input type="text" class="form-control" placeholder="请输入内容">
    </div>
    <!-- 第二个输入框容器 -->
    <div class="col-md-6 mx-auto mb-3">
      <input type="text" class="form-control" placeholder="请输入内容">
    </div>
  </div>
</div>

代码说明 #

• container：用来包裹整个表单，保证内容在不同屏幕下有合适的左右边距；
• row：Bootstrap的行容器，负责管理列的布局；
• col-md-6：表示在屏幕宽度≥768px时，每个输入框占6列（即一半宽度），屏幕小于768px时自动占满12列（整行宽度），实现堆叠；
• mx-auto：给列设置左右margin为auto，让它在row内水平居中；
• mb-3：给输入框容器添加上下边距，移动端堆叠时视觉更舒适；
• form-control：Bootstrap的表单控件样式类，让输入框更美观统一。

如果你没用Bootstrap，用原生CSS的话也可以这么写：

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem; /* 输入框之间的间距 */
  padding: 0 1rem;
}
.input-wrapper {
  width: 100%;
  max-width: 500px; /* 桌面端输入框最大宽度 */
}
.input-wrapper input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .input-wrapper {
    width: 50%;
    max-width: unset;
  }
}

<div class="row">
  <div class="input-wrapper">
    <input type="text" placeholder="请输入内容">
  </div>
  <div class="input-wrapper">
    <input type="text" placeholder="请输入内容">
  </div>
</div>

这样不管用Bootstrap还是原生CSS，都能完美实现你要的效果啦！

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