Question

我研究过如何移动Bootstrap Carousel指示器“点”的位置，并尝试将建议的代码输入到我的.css文件中;然而，似乎没有什么能降低“点”，所以它们不会与我的文本重叠。我已经尝试了其他帖子中提出的有关同一问题的所有代码。有什么建议吗？

下面的代码是针对课程的电影网站。我的旋转木马上有12部电影，这是多个数据目标的原因。在此之下，我已经包含了用于显示每部电影的代码块。我的代码如下，包含.css代码。

编辑：底层问题是我的浏览器缓存。清除缓存后，更改会反映在网页上。

<!-- Carousel -->
<div id="portfolio" class="container-fluid text-center bg-grey">  
    <h2>Click a Movie to Read More</h2>  
    <div id="myCarousel" class="carousel slide text-center" data-ride="carousel">    
        <!-- Indicators -->    
        <ol class="carousel-indicators">      
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>      
        <li data-target="#myCarousel" data-slide-to="1"></li>     
        <li data-target="#myCarousel" data-slide-to="2"></li>  
        <li data-target="#myCarousel" data-slide-to="3"></li>  
        <li data-target="#myCarousel" data-slide-to="4"></li>
        <li data-target="#myCarousel" data-slide-to="5"></li>
        <li data-target="#myCarousel" data-slide-to="6"></li>
        <li data-target="#myCarousel" data-slide-to="7"></li>
        <li data-target="#myCarousel" data-slide-to="8"></li>
        <li data-target="#myCarousel" data-slide-to="9"></li>
        <li data-target="#myCarousel" data-slide-to="10"></li>
        <li data-target="#myCarousel" data-slide-to="11"></li>
        </ol>    
        <!-- Wrapper for slides -->    
            <div class="carousel-inner" role="listbox">      
                <div class="item active">        
                    <span><a href = "movie-details.html"><img src = "../Pictures/jumanji.jpg" alt = "Jumanji" width = "300" height = "400"></a>
                    </span>
                    <br>
                    <h2>Jumanji</h2>    
                </div>

.CSS文件代码：

.carousel-indicators li {
  border-color: #f4511e;
}
.carousel-indicators li.active {
  background-color: #f4511e;
}

指标位于文本之上

0 个答案: