问题标签 [bootstrap-rtl]

我根据此链接中的文档进行编码。但是我的代码在 SCSS 中不起作用。

这是我的 main.scss。

这是我的html

我已经从 npm 下载了引导程序，并创建了一个 custom.scss 文件，然后将所有引导程序组件导入该文件以进行自定义。我使用 RTL 方向，例如，当我使用 .ps-5 类时，它会将填充应用到左侧，但应该将其应用到右侧。我应该怎么办？我已阅读文档，但我不明白该怎么做！有人可以帮助我吗？

我有一个 Angular 12 应用程序，我正在尝试使用 LTR 和 RTL 语言（例如分别为英语和阿拉伯语），最终用户可以在使用该应用程序时选择和应用它。Bootstrap - 我用于 UI 样式 - 要求我在 HTML 元素上设置 dir 属性，并且当我想显示阿拉伯文本时，我需要从原始 LTR CSS 文件中引用一个单独的 RTL CSS 文件。

我以为我可以像这样设置我的index.html：

然后让我的app-component.html生成 HTML、HEAD、LINK 和 BODY 元素等，如下所示：

然而，当我尝试这种布局时，Bootstrap 菜单（和其他与 JavaScript 动作相关的样式）停止工作。我注意到现在，当 Chrome 获取index.html时，Angular 已经在元素之前插入了它的引导脚本。app-root

我还从 DevTools Elements 视图中注意到 Chrome 已将我的 HTML 元素嵌套在app-root它自己创建的文档的元素中。

DevTools 中元素视图的片段

如果我恢复我的更改，那么 Chrome 会获取index.html，我会看到 Angular在元素之后和结束标记之前插入其引导脚本。Bootstrap 喜欢这个并且菜单再次开始工作，但我无法动态选择发出哪个 LTR 或 RTL CSS 链接，以及 HTML 元素是否具有有意义的 LANG 和 DIR 属性，以及对 HEAD 元素（如页面标题）的任何其他更改。app-rootbody

原始 index.html

Chrome 看到的内容：

动态更改这些 HTML 和 HEAD 相关属性和元素的正确方法是什么，以免 Chrome 混淆？