从右到左支持Twitter Bootstrap 3
之前一直存在这样的问题： 支持RTL语言的Twitter Bootstrap CSS
但所有的答案都适合Bootstrap 2.x
我正在做一个阿拉伯文（rtl）的项目，我需要从右到左的Bootstrap 3.x。
有谁知道这个问题的解决办法吗？
-
我强烈build议bootstrap-rtl 。 它是通过Bootstrap核心构build的，因为它是一个引导主题，所以添加了rtl支持。 这将使您的代码更易于维护，因为您可以随时更新核心引导程序文件。 CDN
-
另一个select使用这个独立的库 ，它还带有几个真棒阿拉伯语字体。
你可以在这里find它： RTL Bootstrap v3.2.0 。
引导波斯版本的网站http://rbootstrap.ir/ Ver.2.3.2
在每个引导版本中，都可以手动完成
- 设置rtl方向到你的身体
- 在bootstrap.css文件中，查找“.col-sm-9 {float：left}”expression式，将其更改为float：right
这对于rtl所要做的大部分事情都是要做的
我发现这非常有用，检查它： http : //cdnjs.com/libraries/bootstrap-rtl
如果你想在你的站点上使用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） （xs | sm | md | lg）-offset-（1-12），还有更多的类需要修改，但我只需要那些。
你只需要调用layout.setDirection('rtl')或layout.setDirection('ltr')函数，它将改变Bootstrap 3网格系统的CSS规则。
应该适用于所有浏览器（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; } } }
最后，我可以find从右到左引导的新版本。 分享给大家使用：
bootstrap-3-3-7-rtl和RTL Bootstrap 4.0.0-alpha.6.1
GitHub链接：
https://github.com/parsmizban/RTL-Bootstrap
感谢parsmizban.com创造和分享。
你可以使用我的项目我创build引导3 rtl与sass和gulp所以你可以轻松地定制它https://github.com/z-avanes/bootstrap3-rtl
