Twitter Bootstrap，圖片覆蓋在旋轉木馬上

我使用這個Bootstrap Vertical Thumbnail Carousel源創建引導縮略圖垂直旋轉木馬，它的工作在Firefox和Safari（最新版本），但沒有在鉻中的魅力。Twitter Bootstrap，圖片覆蓋在旋轉木馬上

問題是在Firefox和Safari瀏覽器時按下一個或預先。按鈕，當前一堆圖像滾動和新的一個來。但在鉻其次一堆都是最先發生在第一個和第一束後消失，

這裏是我的代碼而JS Fiddle HERE

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Thumbnail Slider</title> 
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> 
    <link href="css/style.css" rel="stylesheet" type="text/css"> 
</head> 
<body data-twttr-rendered="true" data-spy="scroll" data-target=".bs-docs-sidebar"> 
      <div class="container"> 

       <div class="span8"> 

        <h1>&nbsp;</h1> 

        <div class="well" > 

         <div id="myCarousel" class="carousel vertical slide" > 
         <a class="left carousel-control" href="#myCarousel" data-slide="prev"><img src="icon/up.png"></a> 
         <a class="right carousel-control" href="#myCarousel" data-slide="next"><img src="icon/down.png"></a> 

         <!-- Carousel items --> 
          <div class="carousel-inner"> 

           <div class="item active"> 
            <div class="row-fluid"> 
             <table> 
              <tr> 
               <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/1.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td> 
              </tr> 
              <tr> 
               <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/2.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td> 
              </tr> 
              <tr> 
               <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/3.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td> 
              </tr> 
              <tr> 
               <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/4.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td> 
              </tr> 
             </table> 
            </div><!--/row-fluid--> 
           </div><!--/item--> 

           <div class="item"> 
            <div class="row-fluid"> 
             <table> 
              <tr> 
               <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/5.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td> 
              </tr> 
              <tr> 
               <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/6.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td> 
              </tr> 
              <tr> 
               <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/7.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td> 
              </tr> 
              <tr> 
               <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/8.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td> 
              </tr> 
             </table> 
            </div><!--/row-fluid--> 
           </div><!--/item--> 

           <div class="item"> 
            <div class="row-fluid"> 
             <table> 
              <tr> 
               <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/9.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td> 
              </tr> 
              <tr> 
               <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/10.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td> 
              </tr> 
              <tr> 
               <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/11.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td> 
              </tr> 
              <tr> 
               <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/12.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td> 
              </tr> 
             </table> 
            </div><!--/row-fluid--> 
           </div><!--/item--> 

          </div><!--/carousel-inner-->  

         </div><!--/myCarousel--> 

        </div><!--/well--> 
       </div> 
      </div> 

     <script src="js/jquery.min.js"></script> 
     <script src="js/bootstrap.js"></script> 
     <script src="js/script.js"></script> 
    </body> 
</html>

來源

2014-09-11 Shivam Pandya

看來這個問題是與回購的CSS本身。由git集線器提供的文件具有相同的問題。如果您在回購中提出這個問題，您會得到一個快速回復。 – Kshitiz 2014-09-19 10:57:20

@ Kshitiz感謝您的寶貴意見，但我是新來的混帳。回購。是我的，你能指導我爲什麼你建議我嗎？ – 2014-09-19 11:09:36

對於css來說，有時候相同的css在不同的瀏覽器上表現不同。你需要檢查你應該爲Chrome瀏覽器編寫什麼樣的CSS。您可能會看到相同的CSS在瀏覽器上的行爲不同。將看看你的代碼，並讓你知道 – Kshitiz 2014-09-19 11:21:19

的問題它的轉盤容器（#myCarousel）沒有明確的高度。其孩子.carousel-inner有height:100%，但由於#myCarousel沒有明確的高度，因此此百分比值不起作用，轉盤項目的基於百分比的偏移量也不起作用。

最快的解決辦法是設置提到的高度：

#myCarousel{ 
    height:380px; /* or em, or some other fixed value*/ 
} 

/* OR */ 

.carousel-inner{ 
    height:380px;/* or em, or some other fixed value*/ 
}

Live

卜不是很靈活：如果您需要更改元素的數量和大小，這個高度需要還被改變。

來源

2014-09-22 07:11:47 bonflash

謝謝，這就是我正在尋找，ñ雅。不用擔心它的靈活性。我會管理它。再次感謝一個 – 2014-09-25 04:56:54

@ShivamPandya很高興我能幫上忙！ – bonflash 2014-09-25 05:23:52

Twitter Bootstrap，圖片覆蓋在旋轉木馬上

回答

相關問題