123

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

但所有答案都对 Bootstrap 2.x 有好处

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

有人知道解决办法吗？

4

10 回答 10

168

  1. 我强烈推荐bootstrap-rtl。它建立在 Bootstrap 核心之上，并添加了 rtl 支持，因为它是一个引导主题。这将使您的代码更易于维护，因为您可以随时更新核心引导文件。内容分发网络

  2. 使用这个独立库的另一种选择，它还带有一些很棒的阿拉伯字体。

于 2013-11-01T16:11:51.873 回答
11

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

于 2014-08-28T15:58:32.860 回答
8

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

于 2015-06-22T19:30:57.050 回答
7

在每个版本的引导程序中，您都可以手动完成

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

这可以为 rtl 做大部分你想要的事情

于 2016-04-19T10:45:14.900 回答
6

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

于 2014-02-03T22:23:36.197 回答
5

最后，我可以找到从右到左引导的新版本。在这里分享给大家使用：

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

GitHub链接：

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

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

于 2017-06-15T10:50:01.213 回答
3

我发现这很有帮助，请查看：http ://cdnjs.com/libraries/bootstrap-rtl

于 2014-06-03T13:11:39.163 回答
3

如果您希望 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;
                }
            }
        }
于 2015-05-30T19:57:39.663 回答
0

我们宣布AryaBootstrap，

最后一个版本基于 bootstrap 4.3.1

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

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

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

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

于 2019-02-28T08:02:51.237 回答
0

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

于 2016-11-28T14:44:50.410 回答