html - 导航栏定位 rtl ltr

Question

我在 ltr 中的侧导航栏有一个小问题，我通过添加一个按钮来切换和取消切换来使其响应，如果它低于 700 像素，我还使用媒体查询隐藏它并且只显示切换按钮所以用户可以按下它，然后侧边导航将出现，这样他就可以导航，它的样式就像超过 700 像素一样请记住，我希望它具有相同的样式我不想要在解释之后将其转换为顶部导航或 smthg 这是超过 700 像素的 noraml View

但是当我将窗口调整为小于桌面的完整窗口屏幕时，它看起来像这样

在 en 版本中，它仍然具有相同的宽度，除了在 ar 版本中，你可以看到它看起来像这样，发生这种情况的原因是因为 css 中的定位 ltr 版本默认定位到左侧但在rtl中应该手动定位我的 css 太长，如果你想让我分享它，我只会分享定位部分，这没关系，但它可能会浪费你的时间，因为正如我之前所说，它太长了ar定位css

  .page-wrapper.toggled .sidebar-wrapper {
    left:80%;

  }

zh

.page-wrapper.toggled .sidebar-wrapper {
    left: 0px;
  }

工作(预期结果，但这个在左侧，我希望它在右侧) https://jsfiddle.net/r52nhfb4/2/有定位问题 https://jsfiddle.net/r52nhfb4/1/请记住，我使用的是 laravel，所以所有奇怪的文本和东西都是 laravel 语法

Answer 1

只需更改以下给定的 css:

.sidebar-wrapper 
{ width: 260px; 
height: 100%; 
max-height: 100%; 
position: fixed; 
top: 0; 
right: -300px; /*change this */
z-index: 999; 
}

.page-wrapper.toggled .sidebar-wrapper 
{ 
right:0; /*change this */
}

查看我的回答:https://jsfiddle.net/zLy8xhfb/