Bootstrap 5.2 RTL模式下浮动标签点击后偏移至中间问题求助

针对你遇到的希伯来语浮动标签在RTL模式下偏移的问题，可以通过自定义CSS修正Bootstrap默认样式的定位逻辑，既保留RTL文本方向，又确保标签激活后保持靠右对齐：

修正后的代码 #

<div class="form-floating mb-3" dir="rtl">
  <input class="form-control" id="title" placeholder="כותרת" />
  <label for="title">כותרת</label>
</div>

添加以下自定义CSS：

/* 修正RTL下浮动标签的激活状态定位 */
[dir="rtl"] .form-floating > .form-control:focus~label,
[dir="rtl"] .form-floating > .form-control:not(:placeholder-shown)~label,
[dir="rtl"] .form-floating > .form-select~label {
  right: 0.75rem;
  left: auto;
  transform: translateY(-0.5rem) scale(0.85) translateX(0.15rem);
}

/* 确保标签默认位置靠右 */
[dir="rtl"] .form-floating > label {
  right: 0.75rem;
  left: auto;
  text-align: right;
}

原理说明 #

Bootstrap 5.2的浮动标签样式默认基于LTR布局，在RTL环境下没有自动调整left/right定位属性和transform的X轴偏移方向。通过上述CSS：

• 强制标签的定位基准从left改为right，确保始终靠右对齐
• 调整激活状态下的transform参数，修正偏移问题
• 保持标签文本的RTL方向，希伯来语会正确显示在输入框右侧

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