php - 动态更改 Bootstrap 网格方向(从 ltr 到 rtl 或反向)

Question

我们正在制作一个同时适用于 Rtl 和 Ltr(En 和 Fa)的网站。

我们想使用 tweeter bootstrap (3.*)。

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

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

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

当它是/en 时，我们必须使用 Bootstrap ，它是 Ltr(从左到右)

当它是/fa 时，我们必须使用 Rtl(从右到左)的 bootstrap

我知道有一些我可以使用的 Bootstrap 主题，它们是 Rtl，但我怎样才能同时使用 rtl 和 ltr 并在其中动态更改？ (也许在页面刷新后站点方向变为 Rtl 或 Ltr !!)？

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