在小型和中型设备上的转盘处的一行中显示一个项目

Question

我使用bootstrap carousel连续显示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/