我的网站上有一个引导程序库。当我点击图像时，图像会放大，我可以选择图像两侧的左箭头或右箭头转到下一张或上一张图像。这适用于计算机，但它不适用于移动设备。我正在使用Bootstrap baguette box。下面是该页面的代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/index.css"/>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.css">
<!-- compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- The above links connect javascript, bootstrap and the CSS stylesheet to the web page. -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- The above links connect a stylesheet and jquery scripts to the web page. -->
</head>
<div class="bg">
<div class="container">
<div class="heading">
<h1>Sports Line</h1>
</div>
<nav class="navbar navbar-expand-sm bg-light justify-content-between">
<div class="btn-toolbar">
<ul class="nav navbar-nav inline-navbar">
<a href="index.html" class="btn btn-primary btn-sm">Home</a>
<br>
<a href="teams.html" class="btn btn-primary btn-sm">Teams</a>
<br>
<a href="gallery.html" class="btn btn-primary btn-sm">Gallery</a> <!-- This code is for the navigation bar on the webpages. -->
<br>
<a href="stats.html" class="btn btn-primary btn-sm">Stats</a>
<br>
<a href="stadiums.html" class="btn btn-primary btn-sm">Stadiums</a>
<br>
<a href="info.html" class="btn btn-primary btn-sm">Info</a>
</ul>
</div>
</nav>
<div class="galleryheading">
<h2>Gallery</h2>
</div>
</div>
<body>
<html>
<head>
</head>
<body>
</body>
<div class="container gallery-container">
<div class="tz-gallery">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a class="lightbox" href="photos/galleryimage.jpg">
<img src="photos/galleryimage.jpg" alt="Chelsea v liecester">
</a>
<div class="caption">
<h3>Chelsea V Liecester</h3>
<p>Alvaro Morata working his way through the Leicester defence</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a class="lightbox" href="photos/galleryimage1.jpg">
<img src="photos/galleryimage1.jpg" alt="Manchester United">
</a>
<div class="caption">
<h3>Manchester United victory</h3>
<p>Manchester United celebrating after winning the FA cup <br><br></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a class="lightbox" href="photos/galleryimage2.jpg">
<img src="photos/galleryimage2.jpg" alt="Premier league">
</a>
<div class="caption">
<h3>Premier League Players</h3>
<p>Players from Manchester United, Manchster City, Tottenham, Liverpool, Chelsea and Arsenal</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a class="lightbox" href="photos/galleryimage3.jpg">
<img src="photos/galleryimage3.jpg" alt="Chelsea celebrating">
</a>
<div class="caption">
<h3>Chelsea celebrating after winning the premier league in 2017</h3>
<p>Chelsea finished at the top of the premier league table in 2017.</p> <!-- This code displays images as well as captions as a gallery. -->
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a class="lightbox" href="photos/galleryimage4.jpg">
<img src="photos/galleryimage4.jpg" alt="Stadium">
</a>
<div class="caption">
<h3>Old Trafford Stadium</h3>
<p>Manchester United's home football ground, known as Old Trafford. <br><br></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a class="lightbox" href="photos/galleryimage5.jpg">
<img src="photos/galleryimage5.jpg" alt="logos">
</a>
<div class="caption">
<h3>Team logos</h3>
<p>The most popular football team logos. <br><br><br></p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
baguetteBox.run('.tz-gallery'); <!-- This is for the gallery. it is there to allow the user to click the next or previous arrow when images are enlarged -->
</script>
</html>
<div id="dialog-2" title="Dialog Title goes here...">If you have any queries or would like to request further information on your favourite football team, please do not hesitate to contact us. We will be more than happy to help.<br><br>Tel:01484213476<br><br>Email:u1555602@unimail.hud.ac.uk<br> saleemm070@gmail.com<br><br>Address: 12 Queen Street<br> Huddersfield<br> HD3 4GL</div>
</body>
</div>
我的css代码是：
/* Variables used for font and h1 color */
.gallery-container h1 {
text-align: center;
margin-top: 70px;
font-family: Serif;
font-weight: bold;
color: #8c8c8c; }
/* Variable used for gallery color */
.gallery-container p.page-description {
text-align: center;
margin: 30px auto;
font-size: 18px;
color: #8c8c8c; }
.tz-gallery {
padding: 40px; }
.tz-gallery .thumbnail {
padding: 0;
margin-bottom: 30px;
background-color: #fff;
border-radius: 4px;
border: none;
transition: 0.15s ease-in-out;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06); }
.tz-gallery .thumbnail:hover {
transform: translateY(-10px) scale(1.02); }
.tz-gallery .lightbox img {
border-radius: 4px 4px 0 0; }
.tz-gallery .caption {
padding: 26px 30px;
text-align: center; }
.tz-gallery .caption h3 {
font-size: 14px;
font-weight: bold;
margin-top: 0; }
.tz-gallery .caption p {
font-size: 12px;
color: #2F4F4F;
margin: 0; }
.baguetteBox-button {
background-color: transparent !important; }