Laravel项目Bootstrap RTL模式下Auth脚手架复选框排版异常求助

我有一个使用Bootstrap UI的Laravel项目，已通过以下代码实现多语言本地化，支持根据语言切换LTR/RTL方向：

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ LaravelLocalization::getCurrentLocaleDirection() }}">

但添加Laravel的--auth脚手架后，登录页面中如下代码的复选框始终显示在左侧：

<div class="row mb-3">
    <div class="col-md-8 offset-md-4">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
            <label class="form-check-label" for="remember">
                {{ __('app.rememberMe') }}
            </label>
        </div>
    </div>
</div>

我尝试将label放在checkbox之前，但问题仍未解决。另外，我同时使用npm编译的Bootstrap和RTL Bootstrap的CDN，发现两者样式同时生效（如me类的margin start），疑为样式冲突导致此问题。

1. 移除重复Bootstrap引入，统一用RTL适配版本 #

同时加载常规Bootstrap和RTL Bootstrap是样式冲突的核心原因，必须二选一：

• 若用npm编译：安装Bootstrap RTL版本替换原有Bootstrap

  npm install bootstrap@rtl
  

  在resources/css/app.css等编译入口文件中，替换原有Bootstrap引入：

  @import 'bootstrap/dist/css/bootstrap.rtl.min.css';
  

  重新编译资源：

  npm run build
  

• 若用CDN：只保留RTL Bootstrap的CDN链接，删除本地编译的Bootstrap相关引入。

2. 确保form-check组件的RTL适配 #

解决样式冲突后，Bootstrap RTL会自动处理form-check布局。若仍有问题，可手动绑定方向类：

<div class="form-check form-check-{{ LaravelLocalization::getCurrentLocaleDirection() }}">
    <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
    <label class="form-check-label" for="remember">
        {{ __('app.rememberMe') }}
    </label>
</div>

3. 修正响应式偏移的RTL适配 #

原代码中col-md-8 offset-md-4在RTL模式下会导致偏移异常，可替换为动态方向的偏移类：

<div class="col-md-8 {{ LaravelLocalization::getCurrentLocaleDirection() === 'rtl' ? 'offset-md-0' : 'offset-md-4' }}">

或用自动对齐类替代固定偏移：

<div class="col-md-8 ms-auto">

内容的提问来源于stack exchange，提问作者A.Rahman Al-Khateeb