css - Twitter Bootstrap - 响应图像和轮播

Question

我正在使用最新版本的 Twitter Bootstrap 。

我也在使用 bootstrap-responsive.css。

我希望在该图像的中心有一个图像(作为相框)和一个旋转木马(一个提供 Bootstrap )。但是我希望它们能够响应地调整大小。

我这样做的典型方法是，使轮播具有 position:relative，并简单地重叠到图像上。但是随着主动调整大小，这会导致问题。

对于使用 css 的整个媒体查询来说，这是一个全新的事物，关于如何实现这一点有什么想法吗？

Answer 1

我使用 bootstrap 的 carousel 制作网站是...

<div id = "myCarousel" class = "carousel slide">
      <div class = "carousel-inner">
            <!--each slide goes here-->
            <div class = "item active">
                  <img src = "your image here..." class = "img-responsive">
            </div><!--end itemactive-->
            <div class = "item">
                  <img src = "your image here..." class = "img-responsive">
            </div><!--end itemactive-->
            <!--etc-->
      </div><!--end carousel-inner-->
</div><!--end carouselslide-->

然后在 CSS 中，我会

#myCarousel
{
     background-image:url(your background image path here);
}

#myCarousel.carousel-inner
{
     width: 80%; /*carousel width size here - my example will use 80%, if you want the carousel to fill entire screen, then just remove this width element.*/
     margin-left: auto;
     margin-right: auto;
     /*These two margins are to center the carousel if you set a smaller width. :) */
}

顺便说一句，我使用了 bootstrap.min.css。