图像和轮播不响应 bootstrap5.2

Question

我有反应问题。 当我在手机上打开我的网站时，我放在<i class="img-fluid material-icons">标签中的图标图像会消失，而它们在计算机上是可见的。 我试图从引导程序添加 img-fluid 但它不起作用我不明白为什么。 在此链接上，您可以看到完整https://jsfiddle.net/z3hx2Lcr的所有代码，在此链接中您可以看到结果https://testportfolio111.000webhostapp.com/我也有一个响应问题里面的文字效果。 当我在手机上打开网站时，轮播出现故障，我试图解决这个问题，但我做不到。 谁能给我解决方案？

Answer 1

您的底部有问题，带有 class.skills-bar 的元素会破坏页面并导致右侧出现间隙，因为它具有固定的宽度值，因此将其更改为此代码

.skills-bar {
  width: 100%;
  max-width: 600px;
}

并在您的图标所在的容器中将其更改为移动版本而不是

<div class="col animationtextinleft"></div>
<div class="col"></div>
<div class="col animationtextinright"></div>

用这个

<div class="col-12 animationtextinleft"></div>
<div class="col-12"></div>
<div class="col-12 animationtextinright"></div>

关于您的 slider: your.carousel-item has height: 100vh 将其更改为 height: auto 在移动版本中，其文本未显示的原因是这些幻灯片（carousel-caption）获取 class d-none