html - 使用从右到左的语言显示 Bootstrap 弹出窗口

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

我正在使用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">

以下是从左到右语言下弹出窗口的直观显示:

enter image description here

这是从右到右语言下弹出窗口的视觉显示,但显示不正确(弹出窗口的箭头和位置仍然像使用从左到右语言/css 一样):

enter image description here

请忽略从右到左弹出窗口的内容,因为我尚未放入翻译文件/链接中。

我已经在 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/

相关文章:

javascript - 如何访问折叠面板内的可见 html 元素?

html - 输入元素大于指定

javascript - 当父 div 返回 false 时,文件输入的默认操作消失

html - 自定义 Bootstrap 3 轮播

python - 浏览器附加组件生成的合法 Xpath 查询不适用于 urllib2 获取的页面

html - 图像 Bootstrap 上的徽章

html - Bootstrap 移动垂直间距

html - 在 CSS 中,访问过的链接不会改变颜色

jquery - 使用HTML5播放器(音频标签)时如何在HTTP请求中传递授权 header 以确保安全

c# - 常规按钮元素提交表单,这怎么可能?