如何增加我的手機屏幕上的滑塊寬度

Question

我有一個問題，我的手機屏幕上的滑塊非常小我試圖使用媒體查詢，使其在手機屏幕上更大，但沒有工作 這裏是我的滑塊代碼

 <section id="watch-app"> 
     <h2 class="watch-head">watch app</h2> 
     <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> 
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> 
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> 
    </ol> 
    <div class="carousel-inner" role="listbox"> 
    <div class="carousel-item active"> 
     <img class="d-block img-fluid" src="imgs/watch-app.jpg" alt="First slide"> 
    </div> 
    <div class="carousel-item"> 
     <img class="d-block img-fluid" src="imgs/watch-app1.jpg" alt="Second slide"> 
    </div> 
    <div class="carousel-item"> 
     <img class="d-block img-fluid" src="imgs/watch-app.jpg" alt="Third slide"> 
    </div> 
    </div> 
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> 
    <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> 
    <span class=" carousel-control-next-icon" aria-hidden="true"></span> 

    </a> 
</div> 

     </section> 

，這裏是該節

#watch-app{ 
    padding: 7rem; 
    text-align: center; 


} 
.img-fluid{ 
    margin: 0 auto; 
    max-width: 650px; 
    padding-top: 6rem; 
} 
.carousel-indicators li{ 
    width: 20px; 
    height: 20px; 
    background-color:white; 
    border-radius: 50%; 
    border: 1px solid #f16054; 

} 
.carousel-indicators { 
    bottom: -5rem; 
} 
.carousel-indicators .active{ 

    background-color:#ef473a; 
} 
.carousel-control-next-icon{ 

    width: 90px; 
    height: 80px; 
    background-image: url(../imgs/right-arrow.jpg); 
    margin-top: 5rem; 

} 
.carousel-control-prev-icon{ 
     width: 90px; 
    height: 80px; 
    background-image: url(../imgs/left-arrow.png); 
     margin-top: 5rem; 
} 

我的CSS代碼，這裏是我的媒體查詢

@media (max-width: 768px) { 

.img-fluid{ 

    max-width: 900px; 
    margin: 0 auto; 

} 

    } 

這是我的滑塊看怎麼樣在正常畫面 normal screen ，它看起來怎麼樣的手機屏幕 mobile screen

Answer 1

上你必須添加與您的最大寬度