轮播字幕未在移动设备上覆盖图像

Question

bootstrap轮播示例非常适合在没有图像的情况下使用笔记本电脑浏览器中的图像。但是在移动设备上，字幕不会覆盖图像，从而将所有内容下移。你能告诉我如何解决这个问题吗？

https://main.thcguard.com/

Answer 1

我认为这段代码将解决您的问题，将其添加到自定义.css文件中... 让我知道您是否有任何疑问

@media screen and (max-width: 680px) {
  .carousel-caption {
    top: 0;
  }
  .carousel-caption h1 {
    font-size: 1.5rem;
  }
  .carousel-caption .btn {
    padding: .3rem 1rem;
    font-size: 1rem;
  }
  .carousel-control-prev,
  .carousel-control-next {
    display: none;
  }
  .carousel-indicators {
    display: none;
  }
  .carousel-item {
    height: 330px;
  }
}


/*max-width:680px*/

@media screen and (max-width: 420px) {
  .carousel-item {
    height: 220px;
  }
} 

Answer 2

具有“轮播字幕”类的div绝对定位。我会为您的移动断点创建一个媒体查询，然后将那个div设置为相对位置，然后杀死底部：20px;或保持绝对位置，并根据自己的喜好调整底部值。