5

经过大量阅读和搜索 SO 线程后，我几乎可以让我的弹出框使用不同的语言按我想要的方式工作 - 除了以下问题：

在 ltr 语言（英语、法语、德语等）和 rtl 语言（阿拉伯语、希伯来语等）之间，我的bootstrap 3 弹出框的宽度存在差异。

在我的 ltr 语言中，弹出框的宽度只是它需要的宽度 - 最大宽度为 600px;，如下所示：

在此处输入图像描述

在我的 rtl 语言中，弹出框的宽度是 600px 的最大宽度，而不是宽度只是它需要的宽度，如下所示：

在此处输入图像描述

我不确定为什么会这样。我已经阅读了很多很多 SO 帖子并广泛搜索了谷歌，但我无法解决这个问题。

谁能指出为什么我的 ltr 和 rtl 语言弹出框之间的宽度存在差异？我想让 rtl popover 尽可能宽。这可能是一个简单的修复，但我只是看不到问题。

上面的两个屏幕截图显示了相同的信息（来自数据库），只是根据 rtl/ltr 语言使用了不同的 CSS 文件。

这是我的ltr css 代码：

.popover {
    direction: ltr;
    position: fixed;
    word-break: normal;
    word-wrap: break-word;
    z-index: 9999;
    background-color: lavender;
}

.popover.right {
    background-color: blueviolet;
    margin-left: 17px;
    max-width: 600px;
}

.popover.left {
    background-color: gold;
    margin-right: 0px;
    min-width: 375px;
}

这是rtl css代码：

.popover {
    direction: rtl;
    position: fixed;
    word-break: normal;
    word-wrap: break-word;
    z-index: 9999;
    background-color: khaki;
}

.popover.right {
    background-color: indianred;
    margin-left: 17px;
    min-width: 375px;
}

.popover.left {
    background-color: lightsteelblue;
    margin-left: -17px;
    max-width: 600px;
}
4

1 回答 1

3

在检查 bootstrap-rtl.min.css 中的 .popover css 类并更改不同的值后，我设法查明了此问题的原因。

在 bootstrap-rtl.min.css 的 .popover css 类中有一个值：

.popover {
    ....
    right: 0;
    ....
}

下面是对这个正确的 css 属性的描述。

如果我将上述值更改为以下值，则问题已解决：

.popover {
    ....
    right: 1;
    ....
}

解决了有关弹出框仅显示所需宽度（最大宽度为 600 像素）的 rtl 语言的问题。

我希望这会对某人有所帮助。

于 2015-09-01T23:42:39.767 回答