CSS - AOS 动画库 - 为什么滑入动画会破坏我整个页面的宽度？

Question

我正在使用 AOS 库来制作动画。当我使用动画向左滑动​​和向右滑动时，页面的宽度变得比正文宽度更宽，使整个页面看起来很奇怪。我在网上找不到任何解决方案，我找到的唯一解决方案是，如果我给出在 px 宽度上应用动画的元素（无论出于何种原因，它不能大于 400px）。然而，这个解决方案并没有真正起作用，因为它也破坏了我的 CSS。我提供了一个 js 小提琴，这样你就可以明白我的意思。我已经花了几个小时在这上面，所以如果有人能提供帮助，我会非常高兴！谢谢！！

https://jsfiddle.net/Lca8n0ue/

代码：

<div style="background-color:red; height:300px;"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div class="container-fluid">
  <div class="row center-block wrapper">
    <div class="col-sm-6 test" data-aos="slide-right">
      <h2 class="text-center">title</h2>
      <p class="text-center">app</p>
      <div>
        <img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">
      </div>
    </div>
    <div class="col-sm-6 test2" data-aos="slide-left">
      <h2 class="text-center">title</h2>
      <p class="text-center">appp</p>
      <div>
        <img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">

      </div>
    </div>
    <div class="col-sm-6 test" data-aos="slide-right">
      <h2 class="text-center">title</h2>
      <p class="text-center">app</p>
      <div>
        <img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">
      </div>
    </div>
    <div class="col-sm-6 test2" data-aos="slide-left">
      <h2 class="text-center">title</h2>
      <p class="text-center">appp</p>
      <div>
        <img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">

      </div>
    </div>
  </div>
</div>

js:

AOS.init();

唯一有帮助但会毁掉 CSS 的事情是：

.test{
  width: 400px;
}

.test2{
  width: 400px;
}

Answer 1

虽然我不完全确定为什么会这样（我很多时候都遇到同样的问题），但还有另一种方法可以解决这个问题。

overflow-x: hidden只需在父元素上设置即可。

在你的情况下，这将是.container-fluid.