Html 从右到左支持 Twitter Bootstrap 3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19730598/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Right to Left support for Twitter Bootstrap 3
提问by Bishoy
There have been questions about this before: Twitter Bootstrap CSS that support from RTL languages
之前有关于这个的问题： Twitter Bootstrap CSS that support from RTL languages
But all the answers are good for Bootstrap 2.x
但是所有的答案都适用于 Bootstrap 2.x
I'm working on a project that is in Arabic (rtl), and I need Bootstrap 3.x right to left.
我正在开发一个阿拉伯语 (rtl) 项目，从右到左需要 Bootstrap 3.x。
Does anybody know a fix for that?
有人知道解决方法吗？
回答by Muhammad Reda
I highly recommend bootstrap-rtl. It is built over Bootstrap core, and rtl support is added as it is a bootstrap theme. This would make your code more maintainable as you can always update your core bootstrap files. CDN
Another option to use this stand-alone library, It also comes with few awesome Arabic fonts.
我强烈推荐bootstrap-rtl。它建立在 Bootstrap 核心之上，并且添加了 rtl 支持，因为它是一个引导主题。这将使您的代码更易于维护，因为您可以随时更新核心引导程序文件。CDN
使用这个独立库的另一种选择，它还附带了一些很棒的阿拉伯字体。
回答by Mohamad Kaakati
You can find it here: RTL Bootstrap v3.2.0.
你可以在这里找到它：RTL Bootstrap v3.2.0。
回答by Mr.Mamadkhan
Bootstrap Persian version of the site http://rbootstrap.ir/Ver.2.3.2
Bootstrap 波斯版网站http://rbootstrap.ir/Ver.2.3.2
回答by Mohsen.Sharify
in every version of bootstrap,you can do it manually
在每个版本的引导程序中，您都可以手动完成
- set rtl direction to your body
- in bootstrap.css file, look for ".col-sm-9{float:left}" expression,change it to float:right
- 将 rtl 方向设置为您的身体
- 在 bootstrap.css 文件中，查找 ".col-sm-9{float:left}" 表达式，将其更改为 float:right
this do most things that you want for rtl
这可以为 rtl 做大多数你想要的事情
回答by Hamid Naghipour
finally, I can find a new version for the right to left bootstrap. share here for use by all:
最后，我可以为从右到左引导程序找到一个新版本。分享到这里供大家使用：
bootstrap-3-3-7-rtl and RTL Bootstrap 4.0.0-alpha.6.1
bootstrap-3-3-7-rtl 和 RTL Bootstrap 4.0.0-alpha.6.1
GitHub link:
GitHub 链接：
https://github.com/parsmizban/RTL-Bootstrap
https://github.com/parsmizban/RTL-Bootstrap
thank you parsmizban.comfor creating and share.
感谢parsmizban.com的创建和分享。
回答by user197508
This is Another Project: www.nuget.org/packages/Twitter.Bootstrap.RTL
回答by Omar Alahmed
I found this very helpful, check it: http://cdnjs.com/libraries/bootstrap-rtl
我发现这很有帮助，请查看：http: //cdnjs.com/libraries/bootstrap-rtl
回答by Eldar
If you want Bootstrap 3 support for RTL and LTR on your site, you can modify CSS rules "on the fly", attached here is a function, it modifies the major classes for Bootstrap 3 like col-(xs|sm|md|lg)-(1-12), col-(xs|sm|md|lg)-push-(1-12), col-(xs|sm|md|lg)-pull-(1-12), col-(xs|sm|md|lg)-offset-(1-12), there are many more classes to be modified but i needed only those.
如果您希望 Bootstrap 3 在您的站点上支持 RTL 和 LTR，您可以“即时”修改 CSS 规则，这里附加的是一个函数，它修改 Bootstrap 3 的主要类，如 col-(xs|sm|md|lg )-(1-12), col-(xs|sm|md|lg)-push-(1-12), col-(xs|sm|md|lg)-pull-(1-12), col- (xs|sm|md|lg)-offset-(1-12)，还有更多的类需要修改，但我只需要那些。
All you need to do is call the function layout.setDirection('rtl')or layout.setDirection('ltr')and it will change the CSS Rules for Bootstrap 3 grid system.
所有你需要做的就是调用函数layout.setDirection('rtl')或者layout.setDirection('ltr')它将改变自举3网格系统的CSS规则。
Should work on all browsers (IE>=9).
应该适用于所有浏览器（IE>=9）。
var layout = {};
layout.setDirection = function (direction) {
layout.rtl = (direction === 'rtl');
document.getElementsByTagName("html")[0].style.direction = direction;
var styleSheets = document.styleSheets;
var modifyRule = function (rule) {
if (rule.style.getPropertyValue(layout.rtl ? 'left' : 'right') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-push-\d\d*/)) {
rule.style.setProperty((layout.rtl ? 'right' : 'left'), rule.style.getPropertyValue((layout.rtl ? 'left' : 'right')));
rule.style.removeProperty((layout.rtl ? 'left' : 'right'));
}
if (rule.style.getPropertyValue(layout.rtl ? 'right' : 'left') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-pull-\d\d*/)) {
rule.style.setProperty((layout.rtl ? 'left' : 'right'), rule.style.getPropertyValue((layout.rtl ? 'right' : 'left')));
rule.style.removeProperty((layout.rtl ? 'right' : 'left'));
}
if (rule.style.getPropertyValue(layout.rtl ? 'margin-left' : 'margin-right') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-offset-\d\d*/)) {
rule.style.setProperty((layout.rtl ? 'margin-right' : 'margin-left'), rule.style.getPropertyValue((layout.rtl ? 'margin-left' : 'margin-right')));
rule.style.removeProperty((layout.rtl ? 'margin-left' : 'margin-right'));
}
if (rule.style.getPropertyValue('float') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-\d\d*/)) {
rule.style.setProperty('float', (layout.rtl ? 'right' : 'left'));
}
};
try {
for (var i = 0; i < styleSheets.length; i++) {
var rules = styleSheets[i].cssRules || styleSheets[i].rules;
if (rules) {
for (var j = 0; j < rules.length; j++) {
if (rules[j].type === 4) {
var mediaRules = rules[j].cssRules || rules[j].rules
for (var y = 0; y < mediaRules.length; y++) {
modifyRule(mediaRules[y]);
}
}
if (rules[j].type === 1) {
modifyRule(rules[j]);
}
}
}
}
} catch (e) {
// Firefox might throw a SecurityError exception but it will work
if (e.name !== 'SecurityError') {
throw e;
}
}
}
回答by mRizvandi
We Announce the AryaBootstrap,
我们宣布AryaBootstrap，
The last version is based on bootstrap 4.3.1
最新版本基于 bootstrap 4.3.1
AryaBootstrap is a bootstrap with dual layout align support and, used for LTR and RTL web design.
AryaBootstrap 是一个支持双布局对齐的引导程序，用于 LTR 和 RTL 网页设计。
add "dir" to html, thats the only action you need to do.
将“dir”添加到 html，这是您需要做的唯一操作。
Checkout the AryaBootstrap Website at: http://abs.aryavandidad.com/
查看 AryaBootstrap 网站：http://abs.aryavandidad.com/
AryaBootstrap at GitHub: https://github.com/mRizvandi/AryaBootstrap
GitHub 上的 AryaBootstrap：https: //github.com/mRizvandi/AryaBootstrap
回答by zareh
you can use my project i create bootstrap 3 rtl with sass and gulp so you can easely customize it https://github.com/z-avanes/bootstrap3-rtl
你可以使用我的项目，我用 sass 和 gulp 创建了 bootstrap 3 rtl，这样你就可以轻松地自定义它 https://github.com/z-avanes/bootstrap3-rtl
