Bootstrap翻转div点击<a href> does not work on mobile

I am making a website and I am having a problem.Bootstrap翻转div点击<a href> does not work on mobile

I am using this code: 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;}

没有人有任何的想法会是什么引起的？

谢谢！

来源

2016-12-28 Fatal Dizz

演示不包含按钮或定位标记，如果包含它们可能会更容易帮助。 – sol

你想让他们按钮或？ –

@ovokuro我刚刚更新了链接到一个小提琴与我正在做什么。谢谢！ –

您的页脚正在笨拙地调整大小，并覆盖手机上的大部分屏幕。添加到您的css：

footer { 
    clear:both 
}

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

来源

2016-12-28 18:29:03 sol

谢谢你指出这一点！但我的主要问题是在移动设备上你甚至不能触摸链接，当你点击一个链接时，甚至没有任何反应，甚至没有突出显示的状态 –

你可以在移动Safari上翻动卡吗？ – sol

不，我不能在移动Safari浏览器上翻动卡片，或点击移动Safari浏览器上的链接，我不确定你是否看到我对主要帖子的评论，但有一件事我忘记提及的是，我正在使用handlebarsjs制作这些div我得到了我api的回应，这可能与z-position在移动设备上无关吗？ –

Bootstrap翻转div点击<a href> does not work on mobile

回答

相关问题