Bootstrap轮播组件切换到首尾边界幻灯片时整体消失是什么原因？

问题原因 #

你的轮播DOM结构存在标签遗漏错误：第三个carousel-item（对应COO Angela W.的幻灯片）缺少闭合的</div>标签，导致轮播内部结构层级错误，Bootstrap的JS在计算切换逻辑时识别到异常结构就会触发渲染异常，出现整体消失的问题。

修复方案 #

你只要在第三个carousel-item的代码块末尾补加一个</div>即可，修复后的对应片段如下：

<div class="carousel-item">
  <img src="https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/angela.png" class="d-block w-100" alt="angela?">
  <div class="carousel-caption bg-dark rounded-pill py-0">
    <p class="text-center font-weight-bold mb-0">COO: <span class="font-weight-light">Angela W.</span></p>
  </div>
</div> <!-- 这里为你漏加的闭合标签 -->
<div class="carousel-item">
  <img src="https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/amie.png" class="d-block w-100" alt="amie or amy?">
  <div class="carousel-caption bg-dark rounded-pill py-0">
    <p class="text-center font-weight-bold mb-0">CTO: <span class="font-weight-light">Amie S.</span></p>
  </div>
</div>

内容的提问来源于stack exchange，提问作者kyledeato