希望有人可以在这里为我提供帮助。
在使用Bootstrap 4旋转木马时，我发现如果幻灯片的内容在某处有锚标记，则旋转木马根本不会进入该幻灯片。我想保留一个按钮来链接到幻灯片上站点的其他部分的设计，但是如果轮播不会滑动到该按钮，我不知道如何实现。
我进行了广泛的故障排除，这肯定是导致此问题的标签，因为相同的代码减去按钮周围的定位标签效果很好。
感谢您的帮助。
代码如下：
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="custom.css">
<title>SW Events - Tasting Menus</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="container" id="tastingCar">
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="pics/soWhiskyGlass2Cropped.jpg" class="rounded" alt="So Whisky Tasting" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<!-- Anchor tag won't allow carousel to slide -->
<a href="https://www.thewhiskyambassador.com/courses-training/"><button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button>
</div>
</div>
</div>
<div class="carousel-item">
<img src="pics/soWhisky1Cropped.jpg" class="rounded" alt="Gin Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Gin Tastings</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ullam distinctio, eaque provident qui temporibus totam odit consequuntur deleniti facere soluta eum explicabo laboriosam ab sit accusamus reiciendis doloremque unde!</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Private Tastings</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit perspiciatis molestiae, minima, omnis esse quas nostrum aperiam vel recusandae magni ea eum magnam quae, voluptatibus earum deserunt sint. Omnis, nobis.</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<!-- Anchor tag won't allow carousel to slide -->
<a><button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button></a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tastingTitle").fadeIn(750, function() {
$("#tastingCar").fadeIn(1000, function() {
$("#weddingSub").fadeIn(1250);
});
});
});
var myFunc = $(document).ready(function(){
$("#bookWedding").click(function () {
$("#chateauLogo").fadeOut(500);
$("#weddingSub").fadeOut(500);
$("#inAssoc").fadeOut(500);
$("#bookWedding").fadeOut(500, function () {
$("#weddingForm").fadeIn(500);
});
});
});
$(function () {
$( "#datepicker" ).datepicker();
} );
$('.carousel').carousel({
interval: false
});
</script>
</div>
</body>
答案 0 :(得分：0)
我更改代码，
很明显，您可以在bootstarp滑块中添加锚标记，只需删除按钮，然后在锚标记中添加类即可。
代码如下：
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="custom.css">
<title>SW Events - Tasting Menus</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="container" id="tastingCar">
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="pics/soWhiskyGlass2Cropped.jpg" class="rounded" alt="So Whisky Tasting" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<a href="add link to other parts of the site" class="btn btn-secondary text-right">Find out more</a>
</div>
</div>
</div>
<div class="carousel-item">
<img src="pics/soWhisky1Cropped.jpg" class="rounded" alt="Gin Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Gin Tastings</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ullam distinctio, eaque provident qui temporibus totam odit consequuntur deleniti facere soluta eum explicabo laboriosam ab sit accusamus reiciendis doloremque unde!</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Private Tastings</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit perspiciatis molestiae, minima, omnis esse quas nostrum aperiam vel recusandae magni ea eum magnam quae, voluptatibus earum deserunt sint. Omnis, nobis.</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<a href="add link to other parts of the site" class="btn btn-secondary text-right">Find out more</a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tastingTitle").fadeIn(750, function() {
$("#tastingCar").fadeIn(1000, function() {
$("#weddingSub").fadeIn(1250);
});
});
});
var myFunc = $(document).ready(function(){
$("#bookWedding").click(function () {
$("#chateauLogo").fadeOut(500);
$("#weddingSub").fadeOut(500);
$("#inAssoc").fadeOut(500);
$("#bookWedding").fadeOut(500, function () {
$("#weddingForm").fadeIn(500);
});
});
});
$(function () {
$( "#datepicker" ).datepicker();
} );
$('.carousel').carousel({
interval: false
});
</script>
</div>
</body>
答案 1 :(得分：0)
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<title>SW Events - Tasting Menus</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="container" id="tastingCar">
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" class="rounded" alt="So Whisky Tasting" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<!-- Anchor tag won't allow carousel to slide -->
<a href="https://www.thewhiskyambassador.com/courses-training/"><button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button></a>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" class="rounded" alt="Gin Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Gin Tastings</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ullam distinctio, eaque provident qui temporibus totam odit consequuntur deleniti facere soluta eum explicabo laboriosam ab sit accusamus reiciendis doloremque unde!</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/park.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Private Tastings</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit perspiciatis molestiae, minima, omnis esse quas nostrum aperiam vel recusandae magni ea eum magnam quae, voluptatibus earum deserunt sint. Omnis, nobis.</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<!-- Anchor tag won't allow carousel to slide -->
<a><button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button></a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tastingTitle").fadeIn(750, function() {
$("#tastingCar").fadeIn(1000, function() {
$("#weddingSub").fadeIn(1250);
});
});
});
var myFunc = $(document).ready(function(){
$("#bookWedding").click(function () {
$("#chateauLogo").fadeOut(500);
$("#weddingSub").fadeOut(500);
$("#inAssoc").fadeOut(500);
$("#bookWedding").fadeOut(500, function () {
$("#weddingForm").fadeIn(500);
});
});
});
$(function () {
$( "#datepicker" ).datepicker();
} );
$('.carousel').carousel({
interval: false
});
</script>
</div>
</body>
尝试