Twitter Bootstrap - 响应式图像和旋转木马

我正在使用最新版本的twitter引导程序。Twitter Bootstrap - 响应式图像和旋转木马

我也使用bootstrap-responsive.css。

我希望在这样的图像中心有一个图像（作为图片框）和一个传送带（一个提供自举）。不过，我希望他们能够作出负责任的调整。

我会这样做的典型方式是，使旋转木马具有相对位置：和图像上的简单重叠。但随着主动调整大小，会导致问题。

相当新的整个媒体查询事情与CSS，任何想法如何可以实现？

2012-08-08 clazzy

您是否在Google搜索“响应旋转木马”？ – 2012-08-08 18:24:18

是的，传送带响应迅速。即时通讯只是问什么是最好的技术，让图像上的旋转木马在调整响应时调整大小。例如一张笔记本电脑的图片，在这种图片的'笔记本电脑屏幕'中有一个旋转木马。基于@media查询来响应调整大小 – clazzy 2012-08-08 18:44:50

我做什么用引导旋转木马是使网站...

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

来源

2014-06-03 04:49:54

Twitter Bootstrap - 响应式图像和旋转木马

回答

相关问题