Question

所以我正在使用Bootstrap4（更具体地讲，Bootswatch4），我需要一个具有变化/褪色背景的div。我发现js与我想要的最接近：https://github.com/rewish/jquery-bgswitcher 所以我在https://jsfiddle.net/p5d8rskg/中这样使用它：

$(".banana").bgswitcher({
  images: ["image1.jpg", "image2.jpg"],
  interval: 5000,
  duration: 2000
});

在桌面版本中，一切正常。但是问题在于，在移动版本中，导航栏会越过div并将div的内容推送到外部。如何解决此“错误”？还是有没有比“ bgswitcher”更简单的方法而没有“ bug”呢？

感谢您的输入。

Answer 1

更多的是骇人听闻的解决方案，但可行的方法是将position: absolute用于.banana容器。这样容器可以固定到您定义的位置。

我有updated your fiddle来显示解决方案：

nav {
    z-index: 1000 !important;
}

.banana {
    background-color: powderblue;
    height: 400px;
    width: 400px;
    background-size: cover;
    color: white;
    font-size: 30px;
    position: absolute;
    top: 56px;
    left: 0;
}

基本上，我添加了position: absolute以及top: 56px（导航栏的高度）和left: 0来定义位置。为了使您的导航栏位于最前面而不是文本上方，请对该元素应用较大的z-index。

祝你好运！

Bootstrap4 Navbar在移动设备中无法与“ jQuery.BgSwitcher”一起使用

1 个答案: