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 - 響應式圖像和旋轉木馬

回答

相關問題