时间戳

首页 > 解决方案 > 导航栏定位 rtl ltr

html - 导航栏定位 rtl ltr

问题描述

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

但是当我将窗口大小调整为小于桌面的完整窗口时，它看起来像这样 在此处输入图像描述

在 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 语法

标签： htmlcsslaravelsidebar

解决方案

只需更改以下给定的 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/

推荐阅读