Css 从右到左支持Twitter引导3

关于这一点，以前有过一些问题：

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

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

有人知道解决办法吗

我强烈推荐。它构建在引导核心之上，并且添加了rtl支持，因为它是一个引导主题。这将使您的代码更易于维护，因为您可以随时更新核心引导文件

另一个选择是使用它，它也有一些很棒的阿拉伯字体

这是另一个项目：

---

我发现这非常有用，请查看：

你可以在这里找到：。

如果你想在你的站点上支持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）-offset-（1-12），还有很多类需要修改，但我只需要那些

您只需调用函数

layout.setDirection（'rtl'）

或

layout.setDirection（'ltr'）

，它将更改Bootstrap 3网格系统的CSS规则

应适用于所有浏览器（即>=9）

var布局={}；
layout.setDirection=功能（方向）{
layout.rtl=（direction=='rtl'）；
document.getElementsByTagName（“html”）[0].style.direction=direction；
var styleSheets=document.styleSheets；
var modifyRule=函数（规则）{
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'）；
}
};
试一试{
for（var i=0；i

引导波斯版站点2.3.2版

在每个引导版本中，您都可以手动执行

设置身体的rtl方向

在bootstrap.css文件中，查找“.col-sm-9{float:left}”表达式，将其更改为float:right

这可以为rtl做大多数您想要的事情，您可以使用我的项目 我用sass和gulp创建bootstrap3rtl，这样您就可以轻松地定制它了

---

最后，我可以找到从右向左引导的新版本。在此处共享供所有人使用：

bootstrap-3-3-7-rtl 及 RTL引导程序4.0.0-alpha.6.1

GitHub链接：

---

感谢您的创作和分享

我们宣布雅宝鞋带

最后一个版本基于bootstrap 4.3.1

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

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

查看AryaBootstrap网站，网址为：

---

GitHub上的AryaBootstrap:

将代码的集成部分带来，而不仅仅是复制链接，这是非常有用的，这是最好的！

        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;
                }
            }
        }