在小型和中型設備上的Carousels上顯示一個項目

Question

我已經使用bootstrap旋轉木馬在一行上顯示3個項目，並且它可以很好地工作。但是我只想爲小設備（手機或平板電腦）顯示一個項目。任何人都可以幫助我嗎？ 這裏是我用過

<section id="services" class="service"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-12 text-center"> 
       <h2 class="section-heading" style="font-family:daniel; font-weight:bolder; font-size:40px; color:#F9121A;">WorkShops &amp; Tracks</h2> 
       <hr class="primary"> 
      </div> 
     </div> 
    </div><br> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel" > 
     <div class="container"> 
      <div class="row"> 
       <!-- Indicators --> 

       <!-- Wrapper for slides --> 
       <div class="carousel-inner"> 
       <div class="item active"> 

        <div class="col-lg-4 col-md-4 text-center"> 
         <div class="service-box"> 
          <img src="img/img.jpg" class="text-primary sr-icons" width="200px" height="150px"> 
          <h3 style="color:#F9121A;"></h3> 
          <p class="text-muted" > 

          </p> 
          <a href="#" class="btn btn-primary">Show Details</a> 
         </div> 
        </div> 

        <div class="col-lg-4 col-md-4 text-center"> 
         <div class="service-box"> 
          <img src="img.jpg" class="text-primary sr-icons" width="200px" height="150px"> 
          <h3 style="color:#F9121A;"></h3> 
          <p class="text-muted" > 

          </p> 
          <a href="" class="btn btn-primary">Show Details</a> 
         </div> 
        </div> 

        <div class="col-lg-4 col-md-4 text-center"> 
         <div class="service-box"> 
          <img src="img.jpg" class="text-primary sr-icons" width="200px" height="150px"><br><br> 
          <h3 style="color:#F9121A;"></h3> 
          <p class="text-muted" > 

          </p> 
          <a href="#" class="btn btn-primary">Show Details</a> 
         </div> 
        </div> 
       </div> 

       <div class="item"> 

        <div class="col-lg-4 col-md-4 text-center"> 
        <div class="service-box"> 
         <img src="img.jpg" class="text-primary sr-icons" width="200px" height="150px"> 
         <h3 style="color:#F9121A;"></h3> 
         <p class="text-muted" > 

         </p> 
         <a href="#" class="btn btn-primary">Show Details</a> 
        </div> 
        </div> 

        <div class="col-lg-4 col-md-4 text-center"> 
        <div class="service-box"> 
         <img src="img.jpg" class="text-primary sr-icons" width="200px" height="150px">      
          <h3 style="color:#F9121A;"></h3> 
         <p class="text-muted" > 

         </p> 
         <a href="#" class="btn btn-primary">Show Details</a> 
        </div> 
        </div> 

        <div class="col-lg-4 col-md-4 text-center"> 
        <div class="service-box"> 
         <img src="img.jpg" class="text-primary sr-icons" width="200px" height="150px">      
          <h3 style="color:#F9121A;"></h3> 
         <p class="text-muted" > 

         </p> 
         <a href="#" class="btn btn-primary">Show Details</a> 
        </div> 
        </div> 

       </div> 


       </div> 

       <!-- Left and right controls --> 
       <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left"></span> 
       <span class="sr-only">Previous</span> 
       </a> 
       <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right"></span> 
       <span class="sr-only">Next</span> 
       </a> 
      </div> 
     </div> 
    </div> 
</section> 

Answer 1

我會用一個媒體查詢使用JavaScript代碼。 https://www.sitepoint.com/javascript-media-queries/