从右到左支持Twitter Bootstrap 3

Question

之前有过这样的问题：Twitter Bootstrap CSS that support from RTL languages

但所有答案都适用于Bootstrap 2.x.

我正在开发一个阿拉伯语（rtl）的项目，我需要从右到左的Bootstrap 3.x.

有人知道修复吗？

Answer 1

1. 我强烈推荐bootstrap-rtl。它是基于Bootstrap核心构建的，并且添加了rtl支持，因为它是一个引导主题。这将使您的代码更易于维护，因为您始终可以更新核心引导程序文件。 CDN
2. 使用这个stand-alone library的另一种选择，它还附带了一些很棒的阿拉伯字体。

Answer 2

我们宣布AryaBootstrap，

最后一个版本基于bootstrap 4.3.1

AryaBootstrap是一个带有双布局对齐支持的引导程序，用于LTR和RTL网页设计。

将“dir”添加到html中，这是您需要执行的唯一操作。

查看AryaBootstrap网站：http://abs.aryavandidad.com/

GitHub的AryaBootstrap：https://github.com/mRizvandi/AryaBootstrap

Answer 3

你可以在这里找到它：RTL Bootstrap v3.2.0。

Answer 4

这是另一个项目：www.nuget.org/packages/Twitter.Bootstrap.RTL

Answer 5

网站http://rbootstrap.ir/ Ver.2.3.2的Bootstrap波斯版本

Answer 6

最后，我可以找到左右自举的新版本。在此分享供所有人使用：

bootstrap-3-3-7-rtl和RTL Bootstrap 4.0.0-alpha.6.1

GitHub链接：

https://github.com/parsmizban/RTL-Bootstrap

谢谢你parsmizban.com创建和分享。

Answer 7

在每个版本的bootstrap中，您都可以手动完成

1. 设置rtl方向到你的身体
2. 在bootstrap.css文件中，查找“.col-sm-9 {float：left}”表达式，将其更改为float：right

这可以做你想要的rtl大多数事情

Answer 8

我发现这非常有用，请检查一下：http://cdnjs.com/libraries/bootstrap-rtl

Answer 9

如果你想在你的站点上使用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），还有更多的类需要修改，但我只需要那些。

您需要做的就是调用函数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;
                }
            }
        }

Answer 10

你可以使用我的项目我用sass和gulp创建bootstrap 3 rtl所以你可以轻松地自定义它https://github.com/z-avanes/bootstrap3-rtl