Bootstrap中form-floating置于row内时label边距异常如何解决？

• 核心问题是栅格类与form-floating类放在同一个元素上产生了样式冲突：Bootstrap的row采用flex布局，给form-floating直接加col-*类会覆盖form-floating默认的内边距规则，导致标签左间距消失。

• 把栅格列容器和浮动标签容器分层实现，不要共用同一个DOM元素：外层单独做栅格列负责布局占位，内层单独放form-floating组件负责浮动标签效果。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <!-- 外层仅放栅格相关类，负责布局占位 -->
    <div class="col-6 mb-3 mt-3 ml-auto">
      <!-- 内层单独放form-floating类，负责浮动标签效果 -->
      <div class="form-floating">
        <input type="text" class="form-control" id="name">
        <label for="name">Name</label>
      </div>
    </div>
    <!-- 右侧可继续添加其他col列放置对应内容 -->
  </div>
</div>

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