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

我们正在做一个网站，将工作的Rtl和Ltr（英和法）

我们想使用tweeter引导（3.*）

我们的mvc是基于php开发的

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

通过语言，我的意思是：www.example.com/en或www.example.com/fa

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

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

---

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

您是否尝试过翻转所有浮动：左；浮动：在主要网格实体上，作为Rtl专用CSS文件/覆盖使用？

您可以“动态”修改CSS规则，这里附加了一个函数，它修改引导3的主要类，如

col-（xs | sm | md | lg）-（1-12）、col-（xs | sm | md | lg）-push-（1-12）、col-（xs | sm | md | lg）-col-（1-12）

，还有很多类需要修改，但我只需要那些

您只需调用函数

layout.setDirection（'rtl'）

或

layout.setDirection（'ltr'）

，它就会更改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

我会给你一些提示，让你用JavaScript编写脚本，直到Bootstrap framework的功能版本中的本机支持。 您可以在推特引导中使用网格系统中的拉和推功能。用于更改网格顺序。以下是一个示例：

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

.col-md-9.col-md-push-3
.col-md-3.col-md-pull-9

---

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

只需在网格系统中将

float:left；

更改为

float:right；

，当

html

标记具有

dir='rtl'

时

以下是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;
  }
}

---

有点困惑，问题到底是什么？我编辑了我的question@mongoer是的，这是可能的。根据PHP的请求，一个选项可以是<代码> <代码>到LTR/RTL版本。爱这个问题。书签：：YAP，并认为它是这样工作的。我要如何在只有一个条件的情况下动态地进行左右浮动呢？谢谢你的回答，通过使用这个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;
  }
}