我的页面在使用bootstrap 4+和AOS的情况下,一直有右边的填充像素。

我正在重新设计我的一个网站,使用bootstrap 4.4.1和其他libs,如mdb, aos, animate, boxicons, ...。

我不精通所有这些web开发星球,但努力保持代码尽可能干净。我有一个非常恼人的问题,在我的页面右侧有额外的像素填充,而我并没有要求任何......。(显然...)

我做了一个快速的 "变通方法 "来移除水平滚动条,这样就可以在大屏幕上解决这个问题,但是这个问题在移动设备上就更明显了,我也移除了水平滚动条的功能。

我看了很多其他类似问题的帖子,并尝试了很多建议的解决方案,但不幸的是没有成功......。

网站和代码可以在这里看到。www.lesrevolins.frmaquette2

为了清楚地看到哪里出了问题,我建议你在移动设备上查看它,因为很明显右侧充满了空白,即使我使用容器-流体,并正确定义行和列。

任何帮助将是非常感激的!

干杯,ElGrapho

EDIT.我做了一个脱胎换骨的版本,可以在这里看到问题的重现。

我做了一个脱胎换骨的版本,可以在这里看到问题的再现。脱胎换骨的版本有问题 (我把横条的锁扣去掉了,这样可以更好的看到)

从代码的角度看,这就是简单的结构。

<!DOCTYPE html>
<html>

<head>
 // Viewport definition, css inclusions etc..
</head>

<body> 

 <section>
  <div class="container-fluid">
    <div class="row">
     // Standard bootstrap code example for navigation menu
    </div>
  </div>
 </section>

 <section>
  <div class="container-fluid">
    <div class="row">
     // Standard bootstrap code example for carousel
    </div>
  </div>
 </section>

 <section>
  <div class="container-fluid">
    <div class="row">
     // Some basic text using <p></p> on one column and an image on the second column with <img>
    </div>
  </div>
 </section>

 <section>
  <div class="container-fluid">
    <div class="row">
     // Basic call to a parallax effect (from simpleParallax lib)
    </div>
  </div>
 </section>

</body>

如果有人知道这里发生了什么,我很乐意听到它的声音。

0
投票

找到了问题的根源,所以我认为更新它是明智的,为其他人谁可能运行在相同的问题,我做的。

我编辑了摘要,以反映AOS(Animate On Scroll)库的使用。

这个问题是淡化左边过渡中 translate 属性的一个 bug。解决方法是放在x上作为隐藏的溢出(这是目前可以接受的修复方法)。

这个bug可以在AOS的github上找到,问题编号为#285。希望对大家有所帮助!