在大量阅读和搜索 SO 线程之后,我几乎可以让我的弹出窗口按照我希望的方式使用不同的语言工作——除了以下问题:
我的 bootstrap 3 popovers 宽度不同在 ltr 语言(英语、法语、德语等)和 rtl 语言(阿拉伯语、希伯来语等)之间。
在我的 ltr 语言中,弹出窗口的宽度只是它需要的宽度 - 最大宽度为 600px;,如下所示:
在我的 rtl 语言中,弹出窗口的宽度是 600px 的最大宽度,而不是宽度只是它需要的宽度,如下所示:
我不确定为什么会这样。我已经阅读了很多很多 SO 帖子并广泛搜索了谷歌,但我无法解决这个问题。
谁能指出为什么我的 ltr 和 rtl 语言弹出窗口之间的宽度不同?我只想让 rtl 弹出窗口达到它需要的宽度。这可能是一个简单的修复,但我就是看不出问题所在。
以上两个屏幕截图显示相同的信息(来自数据库),只是根据 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;
}
最佳答案
检查 bootstrap-rtl.min.css 中的 .popover css 类并更改不同的值后,我设法查明了此问题的原因。
在 bootstrap-rtl.min.css 的 .popover css 类中有一个值:
.popover {
....
right: 0;
....
}
这是对这个 right css property 的描述.
如果我将上面的值更改为以下值,问题就解决了:
.popover {
....
right: 1;
....
}
关于 rtl 语言的弹出窗口只显示其需要的宽度(最大宽度为 600 像素)的问题已解决。
我希望这会对某人有所帮助。
关于html - ltr 和 rtl 语言之间的弹出窗口宽度问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32324061/