为什么Bootstrap Carousel与Django集成后无法正常工作？

核心问题 #

你遇到的异常是Bootstrap版本不匹配、类名使用错误、控制按钮锚点指向错误共同导致的，具体问题如下：

• 你引入的是Bootstrap 3.4.1版本，但是代码中使用的carousel-item、carousel-control-prev、d-block w-100等都是Bootstrap 4及以上版本的专属类名，Bootstrap3无法识别这些类，所以没有为轮播项添加默认的隐藏、切换样式，导致所有图片直接平铺展示
• 轮播容器的id为carouselInd，但前后切换按钮的href指向的是不存在的#carouselExampleControls，按钮无法和轮播组件绑定，自然没有交互效果

修正后的完整模板代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div id="carouselInd" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        {% for file in files %}
        {% with forloop.counter0 as i %}
        <div class="item {% if i == 0 %}active{% endif %}">
            <img src="{{ file.image.url }}" alt="" style="height: 30rem; width: 100%; display: block;">
        </div>
        {% endwith %}
        {% endfor %}
    </div>
    <a class="left carousel-control" href="#carouselInd" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carouselInd" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
</body>
</html>

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