动态更改引导网格方向（ ltr 到 rtl 或反向）

Posted 2023-02-24

【中文标题】动态更改引导网格方向（ ltr 到 rtl 或反向）

【英文标题】：change bootstrap grid direction dynamically ( ltr to rtl or reverese)

【发布时间】：2015-01-05 09:10:29

【问题描述】：

我们正在制作一个可以同时使用 Rtl 和 Ltr（ En 和 Fa ）的网站。

我们想使用高音引导程序 (3.*)。

我们的 mvc 是基于 php 制作的。

如果站点语言为 fa ，是否可以使用网格流顺序为 Rtl 的引导程序，当语言为英语时使用 Ltr ？

语言是指：www.example.com/en 或 www.example.com/fa

当它是 /en 时，我们必须使用引导程序，即 Ltr（从左到右）

当它是 /fa 时，我们必须使用引导程序，即 Rtl（从右到左）

我知道我可以使用一些引导程序主题，它们是 Rtl ，但是我如何同时使用 rtl 和 ltr 并在其中动态更改？ （可能在页面刷新后站点方向变为 Rtl 或 Ltr ！！）？

【问题讨论】：

有点困惑，到底是什么问题？

我编辑了我的问题

@mongoer 是的，这是可能的。一种选择是根据 PHP 的请求将<link> 转换为 LTR/RTL 版本。

哇。喜欢这个问题。书签:)

【参考方案1】：

当html标签有dir='rtl'时，只需在网格系统中将float:left;更改为float:right;。

这是css：

html[dir="rtl"] .row > .col-xs-1, html[dir="rtl"] .row > .col-xs-2, html[dir="rtl"] .row > .col-xs-3, html[dir="rtl"] .row > .col-xs-4, html[dir="rtl"] .row > .col-xs-5, html[dir="rtl"] .row > .col-xs-6, html[dir="rtl"] .row > .col-xs-7, html[dir="rtl"] .row > .col-xs-8, html[dir="rtl"] .row > .col-xs-9, html[dir="rtl"] .row > .col-xs-10, html[dir="rtl"] .row > .col-xs-11, html[dir="rtl"] .row > .col-xs-12 
  float: right;

@media (min-width: 768px) 
  html[dir="rtl"] .row > .col-sm-1, html[dir="rtl"] .row > .col-sm-2, html[dir="rtl"] .row > .col-sm-3, html[dir="rtl"] .row > .col-sm-4, html[dir="rtl"] .row > .col-sm-5, html[dir="rtl"] .row > .col-sm-6, html[dir="rtl"] .row > .col-sm-7, html[dir="rtl"] .row > .col-sm-8, html[dir="rtl"] .row > .col-sm-9, html[dir="rtl"] .row > .col-sm-10, html[dir="rtl"] .row > .col-sm-11, html[dir="rtl"] .row > .col-sm-12 
    float: right;
  

@media (min-width: 992px) 
  html[dir="rtl"] .row > .col-md-1, html[dir="rtl"] .row > .col-md-2, html[dir="rtl"] .row > .col-md-3, html[dir="rtl"] .row > .col-md-4, html[dir="rtl"] .row > .col-md-5, html[dir="rtl"] .row > .col-md-6, html[dir="rtl"] .row > .col-md-7, html[dir="rtl"] .row > .col-md-8, html[dir="rtl"] .row > .col-md-9, html[dir="rtl"] .row > .col-md-10, html[dir="rtl"] .row > .col-md-11, html[dir="rtl"] .row > .col-md-12 
    float: right;
  

@media (min-width: 1170px) 
  html[dir="rtl"] .row > .col-lg-1, html[dir="rtl"] .row > .col-lg-2, html[dir="rtl"] .row > .col-lg-3, html[dir="rtl"] .row > .col-lg-4, html[dir="rtl"] .row > .col-lg-5, html[dir="rtl"] .row > .col-lg-6, html[dir="rtl"] .row > .col-lg-7, html[dir="rtl"] .row > .col-lg-8, html[dir="rtl"] .row > .col-lg-9, html[dir="rtl"] .row > .col-lg-10, html[dir="rtl"] .row > .col-lg-11, html[dir="rtl"] .row > .col-lg-12 
    float: right;
  

【讨论】：

感谢您的出色回答，通过使用此 css 脚本，我可以在需要时应用

【参考方案2】：

您可以“即时”修改 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')，它会改变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;
                
            
        

【参考方案3】：

你有没有试过只翻转所有 float:left;浮动：就在主要网格实体上并将其作为 Rtl 专用 CSS 文件/覆盖？

【讨论】：

是的，考虑到它是这样工作的，我要如何在一个条件下动态地左右浮动？

【参考方案4】：

在 Bootstrap 框架的功能版本中提供本机支持之前，我将给您一些提示，以便在 javascript 中编写脚本。 您可以在 Tweeter Bootstrap 的网格系统中使用拉取和推送功能。用于更改网格的顺序。这是一个例子：

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

您可以创建一个脚本来检查语言并将适当的推拉类添加到网格中。