ltr和rtl语言之间的popover宽度问题

Question

经过大量的阅读和搜索SO线程后，我几乎让我的popovers工作，因为我希望他们使用不同的语言 - 除了以下问题：

我的bootstrap 3 popovers在ltr语言（英语，法语，德语等）和rtl语言（阿拉伯语，希伯来语等）之间的宽度有所不同。

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

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

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

有人能指出为什么我的ltr和rtl语言弹出窗口之间的宽度有差异吗？我想要使​​rtl popover只有它需要的范围。这可能是一个简单的修复，但我只是看不到问题。

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

这是我的 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;
}

Answer 1

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

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

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

以下是此right css property的说明。

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

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

解决了关于rtl语言只显示最大宽度（最大宽度为600px）的弹出窗口的问题。

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