Question

我正在使用bootstrap进行方向RTL。如果方向是LTR，我将遇到popover问题。弹出箭头应该在左边，否则它应该在右边。

示例：现在我的方向是LTR＆lt;

RTL＆gt;

这是我的CSS：

.popover.right > .arrow {
 top: 50%;
 left: -11px;
 margin-top: -11px;
 border-left-width: 0;
 border-right-color: #999999;
 border-right-color: rgba(0, 0, 0, 0.25);
 }
.popover.right > .arrow:after {
 content: " ";
 left: 1px;
 bottom: -10px;
 border-left-width: 0;
 border-right-color: #ffffff;
 }
.popover > .arrow:after {
border-width: 10px;
content: "";
}
.popover > .arrow, .popover > .arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}

所以我尝试使用

   html[dir="rtl"] .popover.left >.arrow{
   top: 50%;
   right: -11px;
   margin-top: -11px;
   border-left-width: 0;
   border-left-color: #999999;
   border-right-color: rgba(0, 0, 0, 0.25);
  }

我正在使用CSS

<div class="popover"></div>

我不明白为什么这不起作用。

Answer 1

Plz add the hole HTML tag to check out. Is your LTR CSS works correct? I mean when you remove the DIR='rtl' it works correctly or not?

therefore I think that may cause from your HTML Coding.

RTL bootstrap使用css进行Popover箭头定制

1 个答案: