按钮不适用于移动版本
这是我简单的HTML代码：
<p><a href="http://codepen.io/jundymek/" target="_blank" class="btn btn-primary btn-responsive" role="button">Check this site</a></p>
它在我的桌面上工作正常（我点击按钮，它重定向到链接）。当我在移动版上运行时，按钮不可点击。为什么？我该如何解决这个问题？
整个代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Jundymek - portfolio</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mystyle.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Audiowide" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="js/myjs.js"></script>
</head>
<body>
<div class="container-fluid top fill" id="top">
<nav class="navbar navbar-inverse navbar-fixed-top sticky">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" style="color:#FF9422">jundymek</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li id='1' class="active"><a href="#top">Home</a></li>
<li id='2' ><a href="#middle">Portfolio</a></li>
<li id='3' ><a href="#contact">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://www.freecodecamp.com/jundymek" title="freecodecamp.com"><i class="fa fa-free-code-camp fa-2x color" aria-hidden="true"></i></a></li>
<li><a href="https://github.com/jundymek" title="github.com"><i class="fa fa-github fa-2x color" aria-hidden="true"></i></a></li>
<li><a href="http://codepen.io/jundymek/" title="codepen.io"><i class="fa fa-codepen fa-2x color" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</nav>
<div class="vertical-center">
<img class="img-responsive center-block" src="images/html_icons.png" id="icons" alt=""
width="140px">
<h1 class="text-center" style="margin: 10px 0 0 0">jundymek</h1>
<div class="terminal text-center" style="color: #00fd55;font-size:30px; font-family: 'Courier'"></div>
<h3 class="text-center">Sample portfolio page for <a href="https://www.freecodecamp.com">FreeCodeCamp.com</a> course</h3>
</div>
</div>
<div class="container-fluid middle fill" id="middle">
<h1 class="text-center">Portfolio - my sample
projects</h1>
<div class="row">
<div class="col-xs-6 col-sm-3">
<div class="thumbnail">
<figure class="snip1091 navy"><img src="http://ballislife.com/wp-content/uploads/2012/12/Jordan.jpg" alt="jordan"/>
<figcaption>
<h2>MJ <span>Tribute Page</span></h2>
</figcaption><a href="http://codepen.io/jundymek/full/JEwbzN/"
target="_blank"></a>
</figure>
<div class="caption">
<h3>MJ Tribute Page</h3>
<p class="captions">Page about the best NBA player in history.</p>
<p><a href="http://codepen.io/jundymek/full/JEwbzN/"
target="blank" class="btn btn-primary btn-responsive"
role="button">Check this site</a></p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="thumbnail">
<figure class="snip1091 navy"><img src="images/wawa_busy.png" alt="wawabusy"/>
<figcaption>
<h2>Wawabusy <span>.pl</span></h2>
</figcaption><a href="http://www.wawabusy.pl" target="_blank"></a>
</figure>
<div class="caption">
<h3>Wawabusy.pl</h3>
<p class="captions">One of my websites. Do you want to rent a minibus in Poland?;)</p>
<p><a href="http://www.wawabusy.pl" target="_blank" class="btn btn-primary btn-responsive" role="button">Check this site</a></p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="thumbnail">
<figure class="snip1091 navy"><img src="https://placehold.it/435x240?text=placeholder" alt="placeholder"/>
<figcaption>
<h2>Future <span>project</span></h2>
</figcaption><a href="#"></a>
</figure>
<div class="caption">
<h3>Future project</h3>
<p class="captions">There will be link to my next project.</p>
<p><a href="#" class="btn btn-primary btn-responsive" role="button">Check this site</a></p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="thumbnail">
<figure class="snip1091 navy"><img src="https://placehold.it/435x240?text=placeholder" alt="placeholder"/>
<figcaption>
<h2>Future <span>project</span></h2>
</figcaption><a href="#"></a>
</figure>
<div class="caption">
<h3>Future project</h3>
<p class="captions">There will be link to my next project.</p>
<p><a href="#" class="btn btn-primary btn-responsive" role="button">Check this site</a></p>
</div>
</div>
</div>
<div class="col-sm-12">
<h3 class="text-center">My skills: </h3>
<div class="row text-center" style="margin-top:30px">
<div class="image-skills">
<img class="img-responsive" src="images/django.png"
width="140px"alt="django">
</div>
<div class="image-skills">
<img class="img-responsive" src="images/python.png"
width="140px" alt="python">
</div>
<div class="image-skills">
<img class="img-responsive" src="images/git.png"
width="140px" alt="git">
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid top contact" id="contact">
<h1 class="text-center">Contact</h1>
<div class="row">
<div class="col-sm-6">
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="name">Your name</label>
<input type="text" class="form-control" id="name" placeholder="Enter your name">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="name">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email adress" style="color:white">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="form-label"
for="message">Message</label>
<textarea class="form-control" placeholder="Leave a message..." rows="5"></textarea>
</div>
</div>
</div>
<input type="submit" class="btn btn-success btn-responsive" value="Send message">
</form>
</div>
<div class="col-sm-6">
<h3 class="text-center">Connect with me</h3>
<div class="text-center">
<a href="https://www.freecodecamp.com/jundymek" title="freecodecamp.com"><i class="fa fa-free-code-camp fa-4x color" aria-hidden="true"></i></a>
<a href="https://github.com/jundymek" title="github.com"><i class="fa fa-github fa-4x color" aria-hidden="true"></i></a>
<a href="http://codepen.io/jundymek/" title="codepen.io"><i class="fa fa-codepen fa-4x color" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/typewriting.js"></script>
</body>
</html>
我的网站还有一个奇怪的问题。当我减小窗口大小时，我的缩略图图像的一部分是不可点击的。只有图像的上半部分被视为链接。我不知道为什么。有什么想法吗？
5 个答案:
答案 0 :(得分：0)
这真的很奇怪，但我想你能做的就是创建一个实际按钮来打开链接而不是链接。
<input type="button" value="Check this site" onclick="window.open('http://www.google.pl', '_blank');" />
我希望这适合你。
答案 1 :(得分：0)
答案 2 :(得分：0)
尝试使用以下代码。我为你的按钮添加了chklink类，在脚本中我调用了它的事件触发函数
<div class="caption">
<h3>MJ Tribute Page</h3>
<p class="captions">Page about the best NBA player in history.</p>
<p><a href="#"
target="blank" class="btn btn-primary btn-responsive chklink"
role="button">Check this site</a></p>
</div>
<script>
$(document).on("click touchStart",".chklink",function(){
window.open('http://codepen.io/jundymek/full/JEwbzN/', '_blank');
});
</script>
答案 3 :(得分：0)
我搬了
<div class="col-sm-12">
<h3 class="text-center">My skills: </h3>
<div class="row text-center" style="margin-top:30px">
<div class="image-skills">
<img class="img-responsive" src="images/django.png"
width="140px"alt="django">
</div>
<div class="image-skills">
<img class="img-responsive" src="images/python.png"
width="140px" alt="python">
</div>
<div class="image-skills">
<img class="img-responsive" src="images/git.png"
width="140px" alt="git">
</div>
</div>
</div>
到另一行。现在一切都应该如此。
答案 4 :(得分：0)
这已被多次回答。快速回答：
您可以使用＆＃39; touchstart＆＃39;用jquery。
$（＆＃39;＃button1＆＃39;）。on（＆＃39; touchstart click＆＃39;，function（）{/ * code here * /}）;
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？