如何解决Bootstrap表单左右两侧边距不一致的布局问题

问题原因 #

• 外层.row容器内的表单内容区域使用了col-9类，默认左对齐，右侧空出了3列的宽度，导致整体表单偏左，两侧边距不一致
• 内部部分行的列宽总和未占满父容器的12栅格宽度，也会造成局部右侧留白

解决方案 #

方案1：仅添加Bootstrap内置类实现居中（改动最小） #

仅需修改1行代码即可实现效果，无需调整CSS和内部列宽：
将外层的表单容器代码

<div class="col-9">

修改为

<div class="col-9 mx-auto">

mx-auto是Bootstrap自带的水平自动外边距类，会让9列宽度的内容容器在12列的row中自动居中，左右两侧的边距就会相等。

如果需要内部的分隔线、按钮等局部内容也居中，可以把内部所有<div class="col-10">统一修改为<div class="col-10 mx-auto">即可。

方案2：调整列宽占满容器，适配性更好 #

如果想要内容充分利用容器空间，可调整栅格宽度匹配12栅格规则：

1. 外层容器可根据需求调整宽度并居中，例如适配多端的写法：

<div class="col-lg-8 col-md-10 mx-auto">

2. 内部行列宽调整为总和12，例如邮箱和电话行：

<div class="col-6"> <!-- 原col-5改为col-6 -->
  <label for="email" class="form-label">Email</label>
  <input type="email" class="form-control" id="email" placeholder="you@example.com">
  <div class="invalid-feedback">
    Please enter a valid email address for updates.
  </div>
</div>
<div class="col-6"> <!-- 原col-5改为col-6 -->
  <label for="phone" class="form-label">Phone</label>
  <input class="form-control" id="phone">
  <div class="invalid-feedback">
    Please enter a valid phone number.
  </div>
</div>

3. 可在CSS中给表单容器增加最大宽度限制，避免超大屏下表单过宽：

.form-tenant-register {
    padding: 15px;
    margin: auto;
    max-width: 1100px; /* 新增，可根据需求调整数值 */
}

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