基于 RTL 方向的引导模板 - FLIP HORIZONTAL答案

【问题标题】：Bootstrap template based on RTL direction - FLIP HORIZONTAL基于 RTL 方向的引导模板 - FLIP HORIZONTAL
【发布时间】：2017-03-28 17:47:43
【问题描述】：

我有一个 LTR 方向的 Bootstrap v4.0.0 模板，我想将整个模板更改为 RTL 方向，我使用了以下方法：

<html dir="rtl">
<body dir="rtl" >
body { direction:rtl; }
html { direction:rtl; }
https://github.com/MahdiMajidzadeh/bootstrap-v4-rtl (bootstrap-rtl.css)

但这些方法不起作用。

像镜子一样完全改变页面方向的最佳方法是什么 水平翻转？（RTL 方向）

下面的 CSS 代码，它会改变页面的方向水平翻转，但之后如何保留它？（请有一个 查看下面的图片）

-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
-ms-filter: fliph; /*IE*/
filter: fliph; /*IE*/

提前致谢

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-modal

【解决方案1】：

此代码 sn-p 通过反转水平比例来水平翻转/镜像页面

.mirror{
  margin: 0 auto;
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
  float: right;
}

<div class="mirror">
mirrored text
</div>
<div>
not mirrored
</div>

【讨论】：

这个方法很好，但是有一点，如你所知，镜面是水平翻转的，但是我们怎样才能将它旋转到正确的方式，我们将能够阅读文本？
至于您的更新（直到现在才看到）尝试查看此站点的源代码：messletters.com/en/mirrored