如何修复Bootstrap 5轮播组件控制按钮的位置异常问题？

我创建了一个用于测试Bootstrap 5轮播组件的HTML页面，该轮播展示多个项目，上一页（prev）和下一页（next）控制按钮位于幻灯片图像外侧，使用Bootstrap提供的glyphicon-chevron-left和glyphicon-chevron-right图标。通过CSS指定控制按钮位置时，遇到next按钮定位错误的问题——它并未显示在最后一张幻灯片的右侧，而是出现在第一张幻灯片附近，距离prev按钮很近。请问应如何修改CSS样式来解决该问题？

测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Modymix Website Prototype</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" 
    integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <style>
    @media (max-width: 767px)
    {
        .carousel-inner .carousel-item >div
        {
            display: none
        }
        .carousel-inner .carousel-item >div:first-child
        {
            display: block
        }
    }
    
    .carousel-inner .carousel-item.active, .carousel-inner .carousel-item-next, .carousel-inner .carousel-item-prev
    {
        display: flex
    }
    
    @media (min-width: 768px)
    {
        .carousel-inner .carousel-item-end.active, .carousel-inner .carousel-item-next
        {
            transform: translateX(25%)
        }
        
        .carousel-inner .carousel-item-start.active, .carousel-inner .carousel-item-prev
        {
            transform: translateX(-25%)
        }
    }
    
    .carousel-inner .carousel-item-end, .carousel-inner .carousel-item-start
    {
        transform: translateX(0)
    }

    .carousel-control-next-icon 
    {
        right: -30px;
    }

    .carousel-control-prev-icon
    {
        right: -30px;
    }

    /* Adjusted control positioning and styling */
    .carousel-control-prev,
    .carousel-control-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }  
    .carousel-control-prev, .glyphicon glyphicon-chevron-left  {
        left: -75px;
    }

    .carousel-control-next, .glyphicon glyphicon-chevron-right {
        right: -75px;
    }

    .card 
    {
        border-style: none;
    }
  </style>
</head>

<body>
<div class="container text-center my-3"> 
    <h2 class="font-weight-light mb-3">Learning Center Category List</h2> 
    <div class="row mx-auto my-auto justify-content-center"> 

        <div id="recipeCarousel" class="carousel slide" > 
            <div class="carousel-inner" role="listbox">             
                <div class="carousel-item active">  
                    <div class="col-md-3"> 
                        <div class="card"> 
                            <div class="card-img text-center"> 
                                <img src="/images/learning/HealthDieNoBackgroundt0911-2023.jpg" 
                                 width="250" height="96"> 
                            </div> 
                            <!-- <div class="card-img-overlay">Slide 1</div>                         -->
                        </div> 
                    </div> 
                </div> 
                
                <div class="carousel-item"> 
                    <div class="col-md-3"> 
                        <div class="card"> 
                            <div class="card-img"> 
                                <img src="/images/learning/carbManagementNoBackground911-2023.jpg"
                                width="250" height="96"> 
                            </div> 
                            <!-- <div class="card-img-overlay">Slide 2</div>  -->
                        </div> 
                    </div> 
                </div> 
                
                <div class="carousel-item"> 
                    <div class="col-md-3"> 
                        <div class="card"> 
                            <div class="card-img"> 
                                <img src="/images/learning/knowDiabetesCatalog.png" 
                                   width="250" height="96" > 
                            </div> 
                            <!-- <div class="card-img-overlay">Slide 3</div>  -->
                        </div> 
                    </div> 
                </div> 
                
                <div class="carousel-item"> 
                    <div class="col-md-3"> 
                        <div class="card"> 
                            <div class="card-img"> 
                                <img src="/images/learning/ResearchUpdateNobackground0911-2023.jpg" 
                                width="250" height="96" > 
                            </div> 
                            <!-- <div class="card-img-overlay">Slide 4</div>  -->
                        </div> 
                    </div> 
                </div> 
                
                <div class="carousel-item"> 
                    <div class="col-md-3"> 
                        <div class="card"> 
                            <div class="card-img"> 
                                <img src="/images/learning/LearningCatalog_new.jpg" 
                                    width="250" height="96"> 
                            </div> 
                            <div class="card-img-overlay fw-bold" style="color: white""">Catalog 5</div> 
                        </div>
                    </div> 
                </div> 
                
                <div class="carousel-item"> 
                    <div class="col-md-3"> 
                        <div class="card"> 
                            <div class="card-img"> 
                                <img src="/images/learning/LearningCatalog_new.jpg" 
                                    width="250" height="96"> 
                            </div> 
                            <div class="card-img-overlay fw-bold" style="color: white">Catalog 6</div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
            
            <a class="carousel-control carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" 
                role="button" data-bs-slide="prev">
                <span class="glyphicon glyphicon-chevron-left " aria-hidden="true" 
                    style="color: black; font-size: 25px;"></span>
            </a> 
            
            <a class="carousel-control carousel-control-next bg-transparent w-aut" href="#recipeCarousel" 
                role="button" data-bs-slide="next">
                <span class="glyphicon glyphicon-chevron-right " aria-hidden="true" 
                    style="color: black; font-size: 25px;"></span>
            </a> 
        </div> 
    </div> 

    <h5 class="mt-3 fw-light">advances one slide at a time</h5>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" 
  integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  <script>
    // carousel jquery script
    let items = document.querySelectorAll('.carousel .carousel-item')

    items.forEach((el) => {
        const minPerSlide = 4
        let next = el.nextElementSibling
        for (var i=1; i<minPerSlide; i++) {
            if (!next) {
                // wrap carousel by using first child
                next = items[0]
            }
            let cloneChild = next.cloneNode(true)
            el.appendChild(cloneChild.children[0])
            next = next.nextElementSibling
        }
    })
  </script> 
</html>

问题根源 #

1. 同时引入Bootstrap 5和Bootstrap 3的CSS，导致样式冲突，旧版样式覆盖了Bootstrap 5的控制按钮定位逻辑
2. CSS选择器错误：.glyphicon glyphicon-chevron-left写法无效，多类选择器需用.连接而非空格
3. 轮播容器未设置position: relative，导致绝对定位的按钮错误地相对于上层容器定位

修改步骤 #

1. 移除Bootstrap 3依赖
   删除这一行代码，避免版本冲突：

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   

2. 修复轮播容器定位
   给轮播容器添加相对定位，确保按钮以它为参照：

   #recipeCarousel {
       position: relative;
   }
   

3. 修正控制按钮CSS
   替换原按钮定位样式为以下代码，修复选择器错误并统一定位逻辑：

   /* 调整控制按钮定位和样式 */
   .carousel-control-prev,
   .carousel-control-next {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       width: auto;
   }
   .carousel-control-prev {
       left: -75px;
   }
   .carousel-control-next {
       right: -75px;
   }
   /* 移除错误的图标定位样式 */
   .carousel-control-next-icon, .carousel-control-prev-icon {
       right: auto;
   }
   

4. 替换为Bootstrap 5兼容图标
   Bootstrap 5不再支持glyphicon，改用已引入的Bootstrap Icons：

   <!-- 上一页按钮 -->
   <a class="carousel-control-prev bg-transparent" href="#recipeCarousel" role="button" data-bs-slide="prev">
       <span class="bi bi-chevron-left" aria-hidden="true" style="color: black; font-size: 25px;"></span>
   </a> 
   <!-- 下一页按钮 -->
   <a class="carousel-control-next bg-transparent" href="#recipeCarousel" role="button" data-bs-slide="next">
       <span class="bi bi-chevron-right" aria-hidden="true" style="color: black; font-size: 25px;"></span>
   </a>
   

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