javascript - 单击 时的 Bootstrap flip div 在移动设备上不起作用

Question

我正在制作一个网站，但遇到了问题。

我正在使用这段代码: https://jsfiddle.net/3caq0L8u/

点击按钮翻转 div。

翻转 div 的按钮位于卡片的“正面”和“背面”。我的问题是它在桌面上运行良好，但没有按钮或

<a href>

是可点击的。当我尝试点击它们时，没有任何反应。

我觉得它与这个 css 有关，但我不知道是什么

.flip {
  -webkit-perspective: 800;
  perspective: 800;
  position: relative;
  text-align: center;
}
.flip .card.flipped {
  -webkit-transform: rotatey(-180deg);
  transform: rotatey(-180deg);
}
.flip .card {
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
  transform-style: preserve-3d;
  transition: 0.5s;
}
.flip .card .face {
  -webkit-backface-visibility: hidden ;
  backface-visibility: hidden ;
  z-index: 2;
}
.flip .card .front {
  position: absolute;
  width: 100%;
  z-index: 1;
}
.flip .card .back {
  -webkit-transform: rotatey(-180deg);
  transform: rotatey(-180deg);
}
.inner{margin:0px !important;}

有没有人知道是什么原因造成的？

谢谢!

Answer 1

您的页脚调整大小不便，并覆盖了移动设备的大部分屏幕。添加到您的 CSS:

footer {
   clear:both
}

这确保它出现在主要内容之后。