Question

以前对此有过疑问： Twitter Bootstrap CSS that support from RTL languages

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

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

有人知道解决方法吗？

Answer 1

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

Answer 2

您可以在此处找到它：RTL Bootstrap v3.2.0。

Answer 3

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

Answer 4

网站的http://rbootstrap.ir/ Ver.2.3.2

的Bootstrap波斯语版本

Answer 5

在每个版本的bootstrap中，您都可以手动执行

将rtl方向设置为您的身体
在bootstrap.css文件中，查找＆＃34; .col-sm-9 {float：left}＆＃34;表达式，将其更改为float：right

这可以为rtl做大部分事情

Answer 6

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

自举-3-3-7-RTL 和 RTL Bootstrap 4.0.0-alpha.6.1

GitHub链接：

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

感谢您parsmizban.com创建和分享。

Answer 7

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

Answer 8

如果你想在你的站点上支持RTL和LTR的Bootstrap 3，你可以“动态”修改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＆gt; = 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 9

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

Answer 10

我们宣布 AryaBootstrap ，

最新版本基于引导程序4.3.1

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

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

在以下位置查看AryaBootstrap网站： http://abs.aryavandidad.com/

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

从右到左支持Twitter Bootstrap 3

10 个答案: