我添加了 bootstrap carousel 并更改为显示多个元素，尽管我遇到了问题
当我点击下一个标志时一切正常，但是当我点击上一个标志时，出现多个标志一起出现，然后自行修复，会发生什么？我该如何解决这个问题？
这里是元素的链接、实时页面和完整的 repo
https://sebalaini.github.io/portfolio_test/
https://github.com/sebalaini/portfolio_test
这里是 Codepen https://codepen.io/sebalaini/pen/wpRVYL和代码:
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="4"></li>
<li data-target="#carousel" data-slide-to="8"></li>
<li data-target="#carousel" data-slide-to="10"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="First slide">
<div class="carousel-caption d-block">
<h4>HTML</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Second slide">
<div class="carousel-caption d-block">
<h4>CSS</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Third slide">
<div class="carousel-caption d-block">
<h4>SASS</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Third slide">
<div class="carousel-caption d-block">
<h4>Javascript</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="First slide">
<div class="carousel-caption d-block">
<h4>Jquery</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Second slide">
<div class="carousel-caption d-block">
<h4>React</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="First slide">
<div class="carousel-caption d-block">
<h4>webpack</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Third slide">
<div class="carousel-caption d-block">
<h4>NPM</h4>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
最佳答案
看来您的指标编号有点乱。此外，您有一些符合我口味的自定义 CSS。因此，我将其删除并使用 native Bootstrap 类来代替，例如 mx-auto(margin horizontal auto)。
查看此代码段，然后开始一点一点地添加您自己的自定义代码，直到您看到它在哪里中断:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
body {
background: black;
}
.carousel-inner {
height: 300px;
}
.carousel-item {
height: 300px;
}
.carousel-item img {
max-width: 250px;
max-height: 250px;
}
</style>
<div class="container">
<div class="row">
<div class="col mt-4">
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="3"></li>
<li data-target="#carousel" data-slide-to="7"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block mx-auto" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="First slide">
<div class="carousel-caption d-block mx-auto">
<h4>01 HTML</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Second slide">
<div class="carousel-caption d-block mx-auto">
<h4>02 CSS</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Third slide">
<div class="carousel-caption d-block mx-auto">
<h4>03 SASS</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Third slide">
<div class="carousel-caption d-block mx-auto">
<h4>04 Javascript</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="First slide">
<div class="carousel-caption d-block mx-auto">
<h4>05 Jquery</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Second slide">
<div class="carousel-caption d-block mx-auto">
<h4>06 React</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="First slide">
<div class="carousel-caption d-block mx-auto">
<h4>07 webpack</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Third slide">
<div class="carousel-caption d-block mx-auto">
<h4>08 NPM</h4>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>关于css - bootstrap 4 多个元素之前的崩溃，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48350105/