Bootstrap 4表单列对齐：如何让通栏Notes字段与上方双列字段精准对齐

核心问题定位 #

你当前的对齐问题主要来源于两点：

• 表单添加了不适用的form-inline类：form-inline是为所有控件在同一行的行内表单设计的，和你需要的多行水平栅格表单布局冲突，会干扰默认栅格间距
• Notes行手动添加了ml-5、mr-0这类自定义边距，破坏了全局栅格的统一比例，无法和上方双列布局的元素对齐

修复步骤 #

步骤1：调整form标签属性 #

把原有form标签的form-inline类移除：

<form class="col-lg-12" method="post">

步骤2：替换Notes行的布局代码 #

按照上方双列布局的比例统一设计Notes行，不需要自定义边距，代码如下：

<div class="row col-12">
    <!-- 左侧区域和上方的col-6宽度一致，保持标签比例统一 -->
    <div class="col-6">
        <div class="form-group">
            <div class="row">
                <div class="col-3">
                    <label asp-for="Lead.Notes" class="control-label float-left">Notes</label>
                </div>
                <!-- 输入框直接跨剩余所有可用宽度 -->
                <div class="col-9 position-relative">
                    <input asp-for="Lead.Notes" class="form-control mb-2" style="width: calc(200% + 1.5rem);" />
                    <span asp-validation-for="Lead.Notes" class="text-danger d-block"></span>
                </div>
            </div>
        </div>
    </div>
    <!-- 右侧放置提交按钮，和上方右列对齐 -->
    <div class="col-6 text-right">
        <input type="submit" value="Save" class="btn btn-primary" />
    </div>
</div>

calc(200% + 1.5rem)的计算逻辑是：输入框原本占col-9的宽度（左半行的75%），扩展到覆盖右侧col-6的全部区域，刚好和上下两列的输入框左边缘、右半行的右边缘对齐，1.5rem是栅格默认的左右内边距总和。

如果不想用calc计算宽度，也可以自定义Bootstrap栅格的1.5列类，直接按照全局比例拆分：标签占整行1.5列，输入框占9列，提交按钮占1.5列，也可以实现完全对齐。

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