使用 RTL 时强制全宽问题答案

【问题标题】：force full width issue when use RTL使用 RTL 时强制全宽问题
【发布时间】：2017-04-19 22:11:08
【问题描述】：

我使用高级网格插件并在 css 文件中设置方向：“rtl”，我尝试使用此代码强制全宽

<?php if($force_full_width == 1) { ?>
<script type="text/javascript">
     function force_full_width_<?php echo $advanced_id; ?>() {
          var p = $(".standard-body .full-width .advanced-grid-<?php echo $advanced_id; ?>");
          if(p.size() > 0) {
               p.width($('body').width());
               p.css("left", "0px");
               var position = p.offset();
               p.css("left", "-" + position.left + "px");
               p.find(".container").css("padding-left", position.left);
               p.find(".container").css("padding-right", position.left);
          }

          var s = $(".standard-body .fixed .advanced-grid-<?php echo $advanced_id; ?>");
          if(s.size() > 0) {
               s.width($('.standard-body .fixed .pattern').width());
               s.css("left", "0px");
               var position = s.offset();
               var position2 = $('.standard-body .fixed .pattern').offset();
               var position3 = position.left-position2.left;
               s.css("left", "-" + position3 + "px");
               s.find(".container").css("padding-left", position3);
               s.find(".container").css("padding-right", position3);
          }

          var b = $(".standard-body .fixed2 .advanced-grid-<?php echo $advanced_id; ?>");
          if(b.size() > 0) {
               b.width($('body').width());
               b.css("left", "0px");
               var position = b.offset();
               b.css("left", "-" + position.left + "px");
               b.find(".container").css("padding-left", position.left);
               b.find(".container").css("padding-right", position.left);
          }

          var c = $(".fixed-body .advanced-grid-<?php echo $advanced_id; ?>");
          if(c.size() > 0) {
               c.width($('.fixed-body .main-fixed').width());
               c.css("left", "0px");
               var position = c.offset();
               var position2 = $('.fixed-body .main-fixed').offset();
               var position3 = position.left-position2.left;
               c.css("left", "-" + position3 + "px");
               c.find(".container").css("padding-left", position3);
               c.find(".container").css("padding-right", position3);
          }
     }

     force_full_width_<?php echo $advanced_id; ?>();

     $(window).resize(function() {
          force_full_width_<?php echo $advanced_id; ?>();
     });
</script>
<?php } ?>

在 ltr 中它的工作就像这张图片一样好

但在 rtl 语言中会得到像这张图片这样的空白空间

如何使这项工作与 rtl 方向相得益彰

【问题讨论】：

由于这似乎是一个风格问题，我请求您提供一个工作代码演示（即 codepen 等），以便我们可以使用检查器找出正在发生的事情并提供编辑解决问题。一般情况下，宽度计算不正确。
能否提供CSS和HTML？这很可能是问题所在。
寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。见：minimal reproducible example
如果这个问题不包含相关代码，它怎么会被投票？

标签： javascript html css

【解决方案1】：

由于没有提供 HTML，因此无法确定实际问题是什么，因此我们根本无法知道 Javascript 的哪个部分正在处理屏幕截图的哪个部分。

但是，对于一些正确方向的提示，似乎使用 Javascript 进行这种样式化会使问题过于复杂。这个问题应该可以主要通过 CSS 来解决，而 Javascript 只是在语言更改时显示/隐藏所需的 div。只需使用 100% 宽度的容器，然后将元素放入容器内即可解决问题。

【讨论】：

【解决方案2】：

提供的文件是滑块的 javascript。但是您需要一个 HTML 代码才能将滑块插入 HTML 页面。

然后您可以从 HTML 代码本身将宽度更改为 100%。

如果你能提供html代码，相关问题就可以解决。

【讨论】：