2

我正在使用引导程序 3.3.5。

我有一个测试页面，用户可以在其中从从左到右的语言（英语、法语、德语等）到从右到左的语言（阿拉伯语、希伯来语等）之间切换。

我遇到的问题是引导弹出窗口在从右到左的语言下无法正确显示。

如果用户以从右到左的语言查看页面，那么我拉入 rtl bootstrap css 页面，否则使用从左到右的 css 页面。

例如，从右到左的引导 css 是：

<link rel="stylesheet" href="..../assets/plugins/bootstrap/css/bootstrap-rtl.min.css">

从左到右的引导 css 是：

<link rel="stylesheet" href="..../assets/plugins/bootstrap/css/bootstrap.min.css">

这是从左到右语言下弹出框的可视化显示：

在此处输入图像描述

这是从右向语言下的弹出框的视觉显示，显示不正确（弹出框的箭头和位置仍然好像使用从左向右的语言/css）：

在此处输入图像描述

请忽略从右到左弹出框的内容，因为我还没有放入翻译文件/链接中。

我已经为此搜索了 SO & Google，但我找不到对此问题的参考。有没有人建议纠正这个问题？

4

2 回答 2

2

我发现这将解决您遇到的弹出窗口问题。

在您的 rtl css 中放置以下代码：

.popover {
    direction: rtl;
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

上面的代码将翻转整个弹出框。

接下来，您需要在上面提到的 popover css 类下添加以下代码：

.popover-title {
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

.popover-content {
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

然后上面的代码将翻转弹出框标题和正文。

这将意味着弹出框箭头的位置正确，并且弹出框中的文本也正确显示 - 在本例中为 rtl。

希望这可以解决您的问题。

于 2015-08-29T00:22:32.783 回答
0

在css文件中试试这个

#your_id{
    direction: rtl;
}

它应该工作

于 2015-08-11T05:14:22.440 回答