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

时间:2015-08-11 04:02:05

标签: html css twitter-bootstrap-3 right-to-left bootstrap-popover

我正在使用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的可视化显示:

enter image description here

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

enter image description here

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

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

2 个答案:

答案 0 :(得分:2)

我发现这将解决你正在经历的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。

希望这能解决您的问题。

答案 1 :(得分:0)

在css文件中尝试这个

#your_id{
    direction: rtl;
}

它应该有用