如何在一个项目中同时使用rtl和ltr bootstrap 5 sass样式?

kzmpq1sx  于 2023-02-17  发布在  Bootstrap
关注(0)|答案(4)|浏览(384)

我使用的是bootstrap5 scss。
我将ltr的样式作为标准:@import "~ bootstrap / scss / bootstrap";

**问题:**如何连接或启用rtl bootstrap 5 scss样式?

从说明书上看,没有什么是明确的,除了如何通过链接以标准的方式连接,但在scss中是必须的。

8aqjt8rx

8aqjt8rx1#

导入正常 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需求。我想你可以导入其他你认为合适的文件,只要记住压倒一切。

gwo2fgha

gwo2fgha2#

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

sc4hvdpw

sc4hvdpw3#

**重要信息:**我从官方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

9gm1akwq

9gm1akwq4#

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"

相关问题