表单行内复选框布局异常 求非CSS调整解决方案

首先得提个小问题：你的代码里有两个完全相同的id="addToPO"，这属于无效HTML，会导致标签关联混乱，先把第二个checkbox的id改成addToPO2，避免冲突。

回到你核心的布局问题：checkbox所在的表单组高度和同 row 里的输入框组不一致，导致整个form-row的高度被异常撑高，进而挤压了下方Notes字段的位置。我们可以用Bootstrap自带的flex布局类直接修正，完全不需要自定义CSS：

• 给包含checkbox的form-group添加d-flex align-items-center类，让checkbox和label垂直居中，同时让这个表单组的高度和同row里的其他输入框组保持一致
• 确保Notes的form-group独立于所有form-row之外，自然就会另起一行显示

修改后的完整代码如下：

<div class="row">
  <form>
    <div class="form-row">
      <div class="form-group col-md-2 d-flex align-items-center">
        <div class="form-check">
          <label class="form-check-label" for="addToPO"> Add to existing PO </label>
          <input class="form-check-input" type="checkbox" id="addToPO">
        </div>
      </div>
      <div class="form-group col-md-10">
        <select id="inputState" class="form-control">
          <option selected>Choose...</option>
          <option>...</option>
        </select>
      </div>
    </div>
    <div class="form-row">
      <div class="form-group col-md-4">
        <label for="inputSupplier">Supplier</label>
        <input type="text" class="form-control" id="inputSupplier">
      </div>
      <div class="form-group col-md-4">
        <label for="inputSupNum">Supplier #</label>
        <input type="text" class="form-control" id="inputSupNum">
      </div>
      <div class="form-group col-md-4">
        <label for="inputSupName">Supplier Contact Name</label>
        <input type="text" class="form-control" id="inputSupName">
      </div>
    </div>
    <div class="form-row">
      <div class="form-group col-md-4">
        <label for="inputSupPhone">Supplier Contact Phone</label>
        <input type="text" class="form-control" id="inputSupPhone">
      </div>
      <div class="form-group col-md-4">
        <label for="inputSupEmail">Supplier Contact Email</label>
        <input type="text" class="form-control" id="inputSupEmail">
      </div>
      <div class="form-group col-md-4 d-flex align-items-center">
        <div class="form-check">
          <label class="form-check-label" for="addToPO2"> Add to existing PO </label>
          <input class="form-check-input" type="checkbox" id="addToPO2">
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="PONotes">Notes for Purchase Order</label>
      <textarea class="form-control" id="PONotes" rows="3"></textarea>
    </div>
  </form>
</div>

关键修改点说明： #

• d-flex align-items-center：让表单组内部元素垂直居中，同时这个类会让表单组的高度自适应内容，和同row里的其他带输入框的表单组高度完全匹配，彻底解决行高不一致导致的布局偏移
• 修正重复id：把第二个checkbox的id改为addToPO2，符合HTML规范，避免标签关联错误
• Notes的表单组未被包裹在任何form-row中，会自动占据整行宽度，完美实现另起一行的需求

这样调整后，所有表单元素的对齐和间距都会和Bootstrap的默认样式保持统一，完全不需要额外写CSS来调整padding或margin。

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