如何在项目中同时使用 Bootstrap 5 Sass 的 RTL 和 LTR 样式？

Question

我正在使用Bootstrap 5的SCSS。

我包含了从左到右（ltr）的标准样式：@import "~ bootstrap / scss / bootstrap";

问题：如何连接或启用Bootstrap 5 SCSS样式中的rtl？

根据说明，除了如何通过标准链接连接外，没有清晰的内容，但需要在SCSS中实现。

注：ltr代表从左到右，rtl代表从右到左。

- SVE

Answer 1

导入普通的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 个 margin，但在 RTL 上会同时拥有左边和右边的 margins! 因为 RTL 代码只添加了 RTL，而没有改变 RTL 指令。

理想情况下，我们将拥有一个完整的RTL Bootstrap版本，但是用 SCSS 编写，这将解决我们大部分的问题。我会尽快找到更多信息，并更新此答案。

我发现只导入 utilities 就可以满足我大部分的 RTL 需求。我认为你可以根据需要导入其他文件，但要记住覆盖的问题。

- Zahema

Answer 2

我们可以按照以下步骤使用React Bootstrap 5进行设置。

设置1：npm install scss

设置2：创建文件main.scss

设置3：在main.scss文件中

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

设置4：在index.tsx或App.tsx中导入“./main.scss”

- Mohand GK

Answer 3

重要信息：我从官方Bootstrap文档中复制了这一部分：

同时支持LTR和RTL

需要在同一页上同时支持LTR和RTL吗？借助RTLCSS字符串映射，这很容易实现。将您的@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 属性。加载两个文件可能会成为真正的性能瓶颈：考虑一些优化，并尝试异步加载其中一个文件。以这种方式嵌套样式将阻止我们的 form-validation-state() mixin 正常工作，因此需要自己进行一些调整。参见＃31223。

- adampweb

Answer 4

根据我们的文档，您不应在同一页中使用两个CSS文件。您可以查看页面中的起始模板，只使用单个CSS文件。

如果您需要同时使用RTL和LTR，您需要使用Sass并微调构建。但是，我们的官方构建（因此通过CDN提供的发布）不能在同一页中使用两个方向。

我们计划在#32330中添加一些双向内容的示例模板，但尚未完成。由于它按预期工作，因此我关闭此问题。

不过，我们非常乐意听取您对帮助我们改进文档或模板示例的任何见解或建议。 :)

编辑：我发现您共享的代码与您提供的CodePen中发生的情况不符。如果需要任何支持，请使用您尝试的代码更新您的CodePen。

这是来自GitHub问题的答复。

- Arthur Lomakin

---

目前还没有这样的可能性... - SVE