Bootstrap4：带有动画的移动设备上的宽度略过宽（导致底部滚动）

Question

我正在使用Bootstrap Framework和AOS制作一个网站DEMO-滚动库上的动画。

在桌面上，我不得不更改某些动画，因为它们增加了页面的宽度，并进行了水平滚动。 对于移动设备，我有相同的问题，但是现在我不知道问题是否是由动画或其他原因引起的，我看到导航栏变大了。

以下是链接：https://doc.digitalsolutioner.com/

我已经尝试修复导航栏等较宽的元素，但问题仍然存在。 我在其他问题中也看到过类似的情况，即没有容器的行，但事实并非如此。

我想在手机上拥有正确的宽度，并且不进行水平滚动。

Answer 1

罪魁祸首是页脚中的以下类...进行检查：转到页面底部；做检查元素；删除此属性（在浏览器开发人员工具中），以查看其如何导致水平滚动出现

[data-aos^=fade][data-aos^=fade].aos-animate
{   transform: translateZ(0);   }

解决此问题的最简单方法是对身体隐藏overflow-x属性。此css将是最简单的方法，以在不看到底部滚动的情况下获得淡入淡出效果：

body {
    overflow-x: hidden;
}

更新： 在移动设备和移动设备模拟器上，出现水平条...这是由于card-service类上的边距所致，只需删除媒体查询中的margin-left和margin-right属性（如下所示）即可解决这个。

@media (max-width: 576px){
  .card-service {
     /* margin-left: 15px; */
     /* margin-right: 15px; */
     margin-bottom: 25px !important;
  }
}

Answer 2

在AOS中，有一个问题，当您无法设置元素的初始位置时，将其设置为默认位置。

类似于fade-left的默认位置是right: 0，因此每当您调用fade-left时，它都从0开始，并且其创建屏幕溢出。

所以这里有两个选择，

1. 请勿使用fade-left
2. 设置元素的初始值