Bootstrap轮播导航异常修复：双轮播需独立控制及CSS问题排查

问题描述 #

页面仅显示一组轮播导航控件，且只能控制第二个轮播；设置导航图标top和bottom为auto后无任何效果。

问题排查与修复方案 #

1. 轮播控件位置错误（核心问题） #

原代码里，左右控制按钮（.carousel-control-prev/.carousel-control-next）被放在了对应轮播容器的外面，导致所有轮播的控件堆叠在一起，看起来只有一组，且因DOM顺序问题只能控制最后一个轮播。

修复： 将左右控制按钮移到对应轮播容器（#demo{{forloop.counter}}）的内部，让每个轮播拥有独立的控件。

2. CSS语法错误 #

• 原CSS中.carousel-control-prev, .carousel-control-next样式里有多余的**符号，导致CSS解析失败，top: auto; bottom: auto;不生效。
• .carousel-indicator li拼写错误，应为.carousel-indicators li（少了末尾的s）。
• .no-padding样式里用了逗号分隔属性值，正确写法是分号。

修复后的完整代码 #

CSS部分

{% extends 'shop/basic.html' %}
{% load static %}
{% block css %}
.col-md-3
{
    display: inline-block;
    margin-left:-4px;
}

.carousel-indicators .active {
    background-color: blue;
}

.col-md-3 img{
    width: 227px;
    max-height: 242px;
}

body .carousel-indicators li{
    background-color: blue;
}

body .carousel-indicators{
    bottom: 0;
}

body .carousel-control-prev-icon,
body .carousel-control-next-icon{
    background-color: blue;
}

.carousel-control-prev,
.carousel-control-next{
    top: auto;
    bottom: auto;
}

body .no-padding{
    padding-left: 0;
    padding-right: 0;
}
{% endblock %}

HTML部分

{% block body %}
{% load static %}
<div class="container">

    <!--Slideshow starts here -->
    {% for product, range, nSlides in allProds %}
    <h5 class="my-4">Flash Sale On {{product.0.category}} - Recommended Items</h5>

    <div id="demo{{forloop.counter}}" class="carousel slide my-3" data-ride="carousel">
        <ul class="carousel-indicators">
            <li data-target="#demo{{forloop.counter}}" data-slide-to="0" class="active"></li>
            {% for i in range %}
            <li data-target="#demo{{forloop.parentloop.counter}}" data-slide-to="{{i}}"></li>
            {% endfor %}
        </ul>
        
        <div class="container carousel-inner no-padding">
            <div class="carousel-item active">
                <div class="col-xs-3 col-sm-3 col-md-3">
                    <div class="card" style="width: 18rem;">
                        <img src='/media/{{product.0.image}}' class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">{{product.0.product_name}}</h5>
                            <p class="card-text">{{product.0.desc}}</p>
                            <a href="#" class="btn btn-primary">Add to Cart</a>
                        </div>
                    </div>
                </div>
                
                {% for i in product|slice:"1:"%}
                <div class="col-xs-3 col-sm-3 col-md-3">
                    <div class="card" style="width: 18rem;">
                        <img src='/media/{{i.image}}' class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">{{i.product_name}}</h5>
                            <p class="card-text">{{i.desc}}</p>
                            <a href="#" class="btn btn-primary">Add To Cart</a>
                        </div>
                    </div>
                </div>
                {% if forloop.counter|divisibleby:3 and forloop.counter > 0 and not forloop.last %}
                </div><div class="carousel-item">
                {% endif %}
                {% endfor %}
            </div>
        </div>

        <!-- 左右控制按钮移到轮播容器内部 -->
        <a class="carousel-control-prev" href="#demo{{forloop.counter}}" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo{{forloop.counter}}" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div> <!-- 闭合当前轮播容器 -->
    {% endfor %}
</div>
{% endblock %}

修复说明 #

1. 每个轮播的控制按钮现在属于自己的容器，不会再堆叠，实现独立控制。
2. CSS语法错误全部修正后，top: auto; bottom: auto;会正常生效，调整导航图标的垂直位置。

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