html - 如何在移动屏幕上增加我的 slider 宽度

Question

我有一个问题，我的移动屏幕上的 slider 非常小 我尝试使用媒体查询使其在移动屏幕上变大，但没有成功 这是我的 slider 代码

     <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>

这是我那部分的CSS代码

    #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;
}

这是我的媒体查询

    @media (max-width: 768px) {

.img-fluid{

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

}

    }  

这是我的 slider 在正常屏幕中的样子 normal screen 以及它在手机屏幕上的样子 mobile screen

Answer 1

你必须添加一个 width: 100%; 和你的 max-width