Twitter Bootstrap Carousel

Question

我已经在我的网页上实现了旋转木马，如下所示

<div class="container-fluid">

            <div id="myCarousel" class="carousel slide">
                <!-- Carousel items -->
                <div class="carousel-inner">
                <div class="active item">
                    <img src="/public/images/Lighthouse.jpg">
                </div>
                <div class="item">
                    <img src="/public/images/Lighthouse.jpg">
                </div>
                <div class="item">
                    <img src="/public/images/Lighthouse.jpg">
                </div>
                </div>
                <!-- Carousel nav -->
                <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div><!--End of Carousel-->

我希望它保持响应性，目前就是这样，随着屏幕变小，图片也会随之调整。然而，旋转木马填满了整个页面(宽度)，我想让它变小，让它坐在页面的中心。我已经给出了.carousel的宽度，但这似乎会影响响应速度。

有没有人知道如何定制这个插件，或者曾经这样做过？

感谢您的任何帮助

谢谢

Answer 1

媒体查询解决了这个问题，因为我给了轮播一个宽度

@media (max-width:600px) {
  .carousel {
  width: 100%;
  }
 } 

Answer 2

在何处以及如何添加此@media (max-width:600px) { .carousel { width: 100%; } }指令