使用从右到左的语言显示bootstrap popover

Question

我正在使用bootstrap 3.3.5。

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

我遇到的问题是bootstrap popover无法在从右到左的语言下正确显示。

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

例如，从右到左的bootstrap css是：

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

从左到右的bootstrap css是：

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

以下是从左到右语言的popover的可视化显示：

这是右侧语言下的popover的可视化显示，它没有正确显示（弹出窗口的箭头和位置仍然好像使用从左到右的语言/ css）：

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

我搜索了SO＆amp;谷歌为此，但我无法找到这个问题的参考。 是否有人建议更正此问题？

Answer 1

我发现这将解决你正在经历的popover问题。

在你的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。

接下来，您需要在上面提到的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);
}

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

这意味着弹出箭头正确定位和弹出窗口中的文本也会正确显示 - 在本例中为rtl。

希望这能解决您的问题。

Answer 2

在css文件中尝试这个

#your_id{
    direction: rtl;
}

它应该有用