我使用的是bootstrap5 scss。我将ltr的样式作为标准:@import "~ bootstrap / scss / bootstrap";
@import "~ bootstrap / scss / bootstrap";
**问题:**如何连接或启用rtl bootstrap 5 scss样式?
rtl
从说明书上看,没有什么是明确的,除了如何通过链接以标准的方式连接,但在scss中是必须的。
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需求。我想你可以导入其他你认为合适的文件,只要记住压倒一切。
bootstrap.rtl.min
me-2
utilities
gwo2fgha2#
你不应该在同一个页面中同时使用两个CSS文件,正如我们的文档中提到的。你可以在那个页面中使用一个CSS文件来查看我们的入门模板。如果你同时需要RTL和LTR,你需要使用Sass并稍微调整你的构建,但是我们的官方构建(通过CDN发布)不能在同一页面上支持两个方向。我们计划在#32330中添加一个包含一些bidi内容的示例模板--但是还没有完成。我关闭这个问题,因为它按预期工作。不过,我们很乐意得到您的任何见解或建议,以帮助我们改进文档或模板示例。:)编辑:我发现你分享的代码没有反映你提供的CodePen中发生的事情。如果你需要任何支持,请用你尝试过的代码更新你的CodePen。这是来自GitHub issue的答案。
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。
9gm1akwq4#
React引导5
main.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.保存文件
@import "../node_modules/bootstrap/scss/bootstrap-utilities";
../node_modules/bootstrap/dis/css/bootstrap.rtl.css
[dir="rtl"] { paste all style here}
[dir="ltr"] {@import "../node_modules/bootstrap/scss/bootstrap";}
4条答案
按热度按时间8aqjt8rx1#
导入正常 Bootstrap 并使用rtl选择器导入rtl:
注意:如果你导入
bootstrap.rtl.min
,它将覆盖你的颜色变量(因为它是编译过的css,值已经烘焙过了)注#2:我仍然不认为这是bootstrap打算如何使用rtl。因为现在如果你在ltr中的一个元素上有
me-2
,它将在右边有2个边距,但在rtl中,它将在右边和左边都有边距!因为rtl代码只是添加了rtl,并没有改变rtl指令。理想情况下,我们会有一个完整版本的rtl Bootstrap ,但在SCSS中,这将解决我们的大部分问题。我会更新这个答案,只要我发现更多。
我发现仅仅导入
utilities
就可以处理我的大部分rtl需求。我想你可以导入其他你认为合适的文件,只要记住压倒一切。gwo2fgha2#
你不应该在同一个页面中同时使用两个CSS文件,正如我们的文档中提到的。你可以在那个页面中使用一个CSS文件来查看我们的入门模板。
如果你同时需要RTL和LTR,你需要使用Sass并稍微调整你的构建,但是我们的官方构建(通过CDN发布)不能在同一页面上支持两个方向。
我们计划在#32330中添加一个包含一些bidi内容的示例模板--但是还没有完成。我关闭这个问题,因为它按预期工作。
不过,我们很乐意得到您的任何见解或建议,以帮助我们改进文档或模板示例。:)
编辑:我发现你分享的代码没有反映你提供的CodePen中发生的事情。如果你需要任何支持,请用你尝试过的代码更新你的CodePen。
这是来自GitHub issue的答案。
sc4hvdpw3#
**重要信息:**我从官方Bootstrap文档中复制了此部分:
同时进行LTR和RTL
需要在同一个页面上同时使用LTR和RTL吗?多亏了RTLCSS String Maps,这非常简单。用一个类 Package 您的@imports,并为RTLCSS设置一个自定义重命名规则:
边缘案例和已知限制尽管这种方法可以理解,但请注意以下几点:
当切换.ltr和.rtl时,请确保相应地添加dir和lang属性。同时加载这两个文件可能是一个真实的的性能瓶颈:考虑一些optimization,也许可以尝试load one of those files asynchronously。以这种方式嵌套样式将阻止我们的form-validation-state()mixin按预期工作,因此需要您自己稍微调整一下。See #31223。
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"