3

I have implemented the carousel on my webpage as follows

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

I would like it to remain responsive, which at present it is, the picture adjusts as the screen gets smaller. However the carousel fills the whole page (Width) and I would like to make it smaller and have it sit in the center of the page. I have given a width for .carousel but this seems to effect the responsiveness.

Does anyone know how to customize this plugin or have done this in the past

Any help appreciated

Thanks

4

2 に答える 2

3

メディアクエリは、カルーセルに幅を指定したため、この問題を解決します

@media (max-width:600px) {
  .carousel {
  width: 100%;
  }
 }
于 2012-06-22T14:54:07.883 に答える
0

@media (max-width:600px) { .carousel { width: 100%; } }この命令をどこにどのように追加するか

于 2014-02-10T14:02:48.860 に答える