导入正常 Bootstrap 并使用rtl选择器导入rtl：

@import '~bootstrap/scss/bootstrap';

[dir='rtl'] {
  @import '~bootstrap/dist/css/bootstrap-utilities.rtl.min';
}

注意：如果你导入bootstrap.rtl.min，它将覆盖你的颜色变量（因为它是编译过的css，值已经烘焙过了）
注#2：我仍然不认为这是bootstrap打算如何使用rtl。因为现在如果你在ltr中的一个元素上有me-2，它将在右边有2个边距，但在rtl中，它将在右边和左边都有边距！因为rtl代码只是添加了rtl，并没有改变rtl指令。
理想情况下，我们会有一个完整版本的rtl Bootstrap ，但在SCSS中，这将解决我们的大部分问题。我会更新这个答案，只要我发现更多。
我发现仅仅导入utilities就可以处理我的大部分rtl需求。我想你可以导入其他你认为合适的文件，只要记住压倒一切。

你不应该在同一个页面中同时使用两个CSS文件，正如我们的文档中提到的。你可以在那个页面中使用一个CSS文件来查看我们的入门模板。
如果你同时需要RTL和LTR，你需要使用Sass并稍微调整你的构建，但是我们的官方构建（通过CDN发布）不能在同一页面上支持两个方向。
我们计划在#32330中添加一个包含一些bidi内容的示例模板--但是还没有完成。我关闭这个问题，因为它按预期工作。
不过，我们很乐意得到您的任何见解或建议，以帮助我们改进文档或模板示例。：）
编辑：我发现你分享的代码没有反映你提供的CodePen中发生的事情。如果你需要任何支持，请用你尝试过的代码更新你的CodePen。
这是来自GitHub issue的答案。

**重要信息：**我从官方Bootstrap文档中复制了此部分：
同时进行LTR和RTL

需要在同一个页面上同时使用LTR和RTL吗？多亏了RTLCSS String Maps，这非常简单。用一个类 Package 您的@imports，并为RTLCSS设置一个自定义重命名规则：

/* rtl:begin:options: {
    "autoRename": true,
    "stringMap":[ {
        "name": "ltr-rtl",
        "priority": 100,
        "search": ["ltr"],
        "replace": ["rtl"],
        "options": {
            "scope": "*",
            "ignoreCase": false
        }
    } ]
} */
.ltr {
    @import "../node_modules/bootstrap/scss/bootstrap";
}
/*rtl:end:options*/

边缘案例和已知限制尽管这种方法可以理解，但请注意以下几点：
当切换.ltr和.rtl时，请确保相应地添加dir和lang属性。同时加载这两个文件可能是一个真实的的性能瓶颈：考虑一些optimization，也许可以尝试load one of those files asynchronously。以这种方式嵌套样式将阻止我们的form-validation-state（）mixin按预期工作，因此需要您自己稍微调整一下。See #31223。

React引导5

安装程序1：npm安装scss

设置2：创建文件main.scss

设置3：在主. scss文件中

1.相加@import "../node_modules/bootstrap/scss/bootstrap-utilities";
1.从../node_modules/bootstrap/dis/css/bootstrap.rtl.css复制所有样式
1.添加[dir="rtl"] { paste all style here}
1.添加[dir="ltr"] {@import "../node_modules/bootstrap/scss/bootstrap";}
1.保存文件

设置4：在索引. tsx或应用程序. tsx中导入"./main. scss"