导航栏定位 rtl ltr

Question

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

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

在 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/

导航栏定位 rtl ltr

navigation bar poistioning rtl ltr

html

css

sidebar

laravel