css - Bootstrap 4 : Width slightly too wide on mobile with animations (causes scroll at bottom)

标签 css animation mobile bootstrap-4 responsive

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

在桌面上,我必须更改一些动画,因为它们增加了页面的宽度,并进行水平滚动。 对于移动设备,我也有同样的问题,但现在我不明白问题是由动画还是其他原因引起的,我看到导航栏更大。

这是链接:https://doc.digitalsolutioner.com/

我尝试修复导航栏等更宽的元素,但问题仍然存在。 我在其他问题中看到过类似的关于没有容器的行,但事实并非如此。

我希望在移动设备上拥有正确的宽度,并且没有水平滚动。

Screenshot with horizontal scrolling on mobile

最佳答案

AOS中存在问题,当您无法设置元素的初始位置时,它会设置为默认位置。

就像fade-left中一样,默认位置是right: 0,因此每当您调用fade-left时,它都会从0开始并创建屏幕溢出。

所以这里有两个选择,

  1. 不要使用淡入淡出
  2. 设置元素的初始值

关于css - Bootstrap 4 : Width slightly too wide on mobile with animations (causes scroll at bottom),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56564527/

相关文章:

ios - 类似于折线图的 Swift 动画

android - Android、Windows Phone 7 和 Blackberry 的等效配置文件 (iOS)

html - css 垂直对齐 <li> 中的 img 和文本(多行)

css - 根据其他 sibling 的高度调整 sibling 的高度,保持父高度不变?

ios - UITableViewCell 中的 UIView 动画

javascript - 如何在不破坏 jquery 动画的情况下使用@keyframes 实现平滑的页面转换

ruby-on-rails - 将 mobile-fu 与 Rails 一起使用

c# - 我怎样才能像这样在 Windows Mobile 上制作通知弹出窗口?

javascript - 试图做一个 :active to stay on untill other link is clicked

html - 如何改变另一个类(class)的类(class)值(value)?