使用从右到左的语言显示 bootstrap 弹出窗口

Question

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

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

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

比如从右到左bootstrapcss就是：

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

从左到右bootstrapcss是：

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

这是从左到右语言下弹出窗口的视觉显示：

这里是从右到右语言下popover的视觉显示，显示不正确（popover的箭头和位置仍然像使用从左到右的语言language/css ):

请忽略从右到左弹出的内容，因为我还没有放入翻译files/links。

我已经在 SO & Google 中搜索过这个问题，但找不到对这个问题的引用。 有人有解决此问题的建议吗？

Answer 1

在 css 文件中试试这个

#your_id{
    direction: rtl;
}

它应该有效

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

以上代码将翻转整个弹出窗口。

接下来，您需要在上述弹出窗口下方添加以下代码 css class:

.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);
}

上面的代码将翻转弹出窗口标题和body。

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

希望这能解决您的问题。

使用从右到左的语言显示 bootstrap 弹出窗口

display bootstrap popover with right-to-left languages

html

css

right-to-left

twitter-bootstrap-3

bootstrap-popover