我使用的是稍微自定义的 Bootstrap 轮播，但我的幻灯片从一个切换到另一个的方式有问题（即我的轮播项目的高度增加，其 img 首先出现在左侧，然后根据需要在中心）。
<div id="carousel-formation-certified" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carousel-formation-certified" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carousel-formation-certified" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<div class="carousel-inner">
<div class="badge-line line-certified">
<img id="badge-cpf" src="Images/cpf/mon-compte-formation.png" alt="" srcset="">
<div id="badge-meeting" class="badge-icon">
<img src="Images/pictos-formation/003-meeting.png" alt="" srcset="">
</div>
<div id="badge-online" class="badge-icon">
<img src="Images/pictos-formation/002-online-course.png" alt="" srcset="">
</div>
<div id="badge-diploma" class="badge-icon">
<img src="Images/pictos-formation/001-diploma.png" alt="" srcset="">
</div>
<div id="badge-yourchoice" class="badge-icon">
<img src="Images/pictos-formation/006-badge_custom.png" alt="" srcset="">
</div>
</div>
<div class="carousel-item active">
<img src="Images/test-illu-formation/first.png" class="d-block" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Bureautique</h5>
<p>Les logiciels de la suite Office (Word, Excel, Powerpoint, Outlook ...) n'auront plus de secret pour vos collaborateurs.</p>
</div>
</div>
<div class="carousel-item">
<img src="Images/test-illu-formation/second.png" class="d-block" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Expression écrite</h5>
<p>La maîtrise du français en milieu professionnel est essentielle.</p>
</div>
</div>
</div>
</div>
/******* Carousel Formation (Un)Certified *********/
/* Dots */
#carousel-formation-certified.carousel,
#carousel-formation-uncertified.carousel {
height: 100%;
}
#carousel-formation-certified .carousel-indicators,
#carousel-formation-uncertified .carousel-indicators {
height: 100%;
margin-left: 5%;
margin-right: 5%;
flex-direction: column;
}
#carousel-formation-uncertified .carousel-indicators {
right: 0;
left: unset;
}
#carousel-formation-certified .carousel-indicators button,
#carousel-formation-uncertified .carousel-indicators button {
width: 2rem;
height: 2rem;
background-color: rgba(255, 255, 255, 1);
border: none;
border-radius: 50%;
}
#carousel-formation-certified .carousel-indicators button:first-child,
#carousel-formation-uncertified .carousel-indicators button:first-child,
#carousel-formation-uncertified .carousel-indicators button:nth-child(2) {
margin-bottom: 2rem;
}
#carousel-formation-certified .carousel-indicators button.active,
#carousel-formation-uncertified .carousel-indicators button.active {
background-color: rgba(0, 165, 185, 1);
}
/* Slides */
#carousel-formation-certified .carousel-inner,
#carousel-formation-uncertified .carousel-inner {
height: 100%;
position: relative;
}
#carousel-formation-certified .carousel-inner .badge-line,
#carousel-formation-uncertified .carousel-inner .badge-line {
width: 4.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: absolute;
top: 1.5rem;
}
#carousel-formation-certified .carousel-inner .badge-line.line-certified {
height: 75%;
right: 1.5rem;
}
#carousel-formation-uncertified .carousel-inner .badge-line.line-uncertified {
height: 45%;
left: 1.5rem;
}
#carousel-formation-certified .carousel-inner #badge-cpf,
#carousel-formation-uncertified .carousel-inner #badge-cpf {
width: 100%;
height: auto;
margin-top: 0;
}
#carousel-formation-certified .carousel-inner .badge-icon,
#carousel-formation-uncertified .carousel-inner .badge-icon {
width: 100%;
height: 4.5rem;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255,255,255,1);
border-radius: 6px;
}
#carousel-formation-certified .carousel-inner #badge-cpf img,
#carousel-formation-uncertified .carousel-inner #badge-cpf img,
#carousel-formation-certified .carousel-inner #badge-meeting img,
#carousel-formation-uncertified .carousel-inner #badge-meeting img,
#carousel-formation-certified .carousel-inner #badge-online img,
#carousel-formation-uncertified .carousel-inner #badge-online img,
#carousel-formation-certified .carousel-inner #badge-diploma img,
#carousel-formation-certified .carousel-inner #badge-yourchoice img {
width: 60%;
height: auto;
margin-top: 0;
}
#carousel-formation-certified .carousel-inner .carousel-item,
#carousel-formation-uncertified .carousel-inner .carousel-item {
height: 100%;
margin-left: auto;
margin-right: auto;
float: none;
}
#carousel-formation-certified .carousel-inner .carousel-item.active,
#carousel-formation-uncertified .carousel-inner .carousel-item.active {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
#carousel-formation-certified .carousel-inner .carousel-item img,
#carousel-formation-uncertified .carousel-inner .carousel-item img {
width: 22rem;
height: auto;
margin-top: 4rem;
}
#carousel-formation-certified .carousel-inner .carousel-item .carousel-caption,
#carousel-formation-uncertified .carousel-inner .carousel-item .carousel-caption {
padding-bottom: 3.5rem;
}
#carousel-formation-certified .carousel-inner .carousel-item .carousel-caption h5,
#carousel-formation-uncertified .carousel-inner .carousel-item .carousel-caption h5 {
color: rgba(0, 165, 185, 1);
text-align: center;
}
#carousel-formation-certified .carousel-inner .carousel-item .carousel-caption p,
#carousel-formation-uncertified .carousel-inner .carousel-item .carousel-caption p {
color: rgba(0, 0, 0, 1);
text-align: center;
}
似乎将某些高度值从 100% 更改为特定值对高度增加问题有影响。但是，我确信这是解决问题的最佳方法。
关于从一张幻灯片切换到另一张幻灯片时img首先出现的方式，我真的不知道如何解决它。也许是过渡问题？
非常感谢您的帮助。
G