我正在使用bootstrap 3.3.5 .
我有一个测试页面,用户可以在从左到右的语言(英语、法语、德语等)和从右到左的语言(阿拉伯语、希伯来语等)之间切换。
我遇到的问题是 bootstrap popover在从右到左的语言下无法正确显示。
如果用户以从右到左的语言查看页面,那么我会拉入 rtl bootstrap css 页面,否则使用从左到右的 css 页面。
例如,从右到左的 bootstrap 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 中搜索了此问题,但找不到对此问题的引用。 有人建议纠正此问题吗?
最佳答案
我发现这可以解决您遇到的弹出窗口问题。
在你的 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。
希望这能解决您的问题。
关于html - 使用从右到左的语言显示 Bootstrap 弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31932992/