Question

我正在使用最新版本的twitter bootstrap。

我也在使用bootstrap-responsive.css。

我希望在这种图像的中心有一个图像（作为一个相框）和一个旋转木马（一个带有引导程序）。但是我希望他们能够得到相应的调整。

我这样做的典型方法是，使旋转木马具有位置：相对，并且简单地重叠到图像上。但是通过主动调整大小会导致问题。

对css的整个媒体查询有什么新鲜事，有关如何实现这一点的任何想法？

Answer 1

我使用bootstrap的旋转木马制作网站所做的是......

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

Twitter Bootstrap - 响应式图像＆amp;圆盘传送带

1 个答案: