Bootstrap範圍滑塊css bug

Eyecon的Bootstrap範圍滑塊在彼此頂部繪製多個滑塊。在行動中看到錯誤的位置：http://jsfiddle.net/GqMHM/Bootstrap範圍滑塊css bug

我已經採取了從作者的網站源代碼，以及例如在這個網站：http://www.qualitylink.com.br/slider/slider.html

對我的生活中，我想不通爲什麼我看到這個所有我的測試環境中的CSS錯誤。

<!-- Notice this exact example works [email protected] http://www.qualitylink.com.br/slider/slider.html --> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Slider</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="http://www.qualitylink.com.br/slider/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="http://www.qualitylink.com.br/slider/css/bootstrap.slider.css"> 
    <script type="text/javascript" src="http://www.qualitylink.com.br/slider/js/jquery.js"></script> 
    <script type="text/javascript"> 

     $(document).ready(function() { 
      $('.slider').slider({ 
       min: 5, 
       max: 500, 
       step: 5, 
       value: [5,200] 
      }); 
      $('.tooool').tooltip(); 
     }); 
    </script> 
</head> 
<body> 
    <!-- Button to trigger modal --> 
    <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 

    <!-- Modal --> 
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h3 id="myModalLabel">Modal header</h3> 
     </div> 

     <div class="modal-body"> 
      <br><br> 

      <div class="slider slider-horizontal" style="width: 220px;"> 
       <div class="slider-track"><div class="slider-selection" style="left: 0%; width: 27.272727272727273%;"></div> 
       <div class="slider-handle round" style="left: 0%;"></div> 
       <div class="slider-handle round" style="left: 27.272727272727273%;"></div> 
      </div> 
      <div class="tooltip top" style="top: -24px; left: 5.5px;"> 
       <div class="tooltip-arrow"></div><div class="tooltip-inner">5 : 140</div> 
      </div> 
      <input type="text" class="slider" style=""> 
     </div> 

      <br><br> 
     </div> 

     <div class="modal-footer"> 
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
      <button class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 

    <script src="http://www.qualitylink.com.br/slider/js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="http://www.qualitylink.com.br/slider/js/bootstrap.slider.js"></script> 
</body> 
</html>

來源

2013-05-31 That1guyoverthr

嗨@user歡迎來到SO。我看不到你描述的錯誤，看起來好像一切正常。有兩個滑塊，因爲它顯然是一個值的範圍。源代碼只顯示兩個滑塊，而不是「在彼此之上的多個滑塊」。 – Ben

這是一個稍微難從你的問題告訴你正在嘗試做的，但這是你的小提琴，我猜，這位就是你期望看到的一個分支。

http://jsfiddle.net/Aq6fu/

唯一的變化是這樣的：消除所有的額外html您添加到您的原始小提琴的標記。

<input type="text" class="slider" style="" />

我猜測這裏，但也許，而不是進行查看源代碼，你做了檢查與谷歌瀏覽元素，並複製了產生標記，而不是原來的HTML標記。

原始標記只有一個與.slider類元素，但生成的標記具有元件與.slider類。

如果您查看源代碼在你的問題的鏈接 - 查看源代碼：http://www.qualitylink.com.br/slider/slider.html - 你可以看到頁面上的html不不在你的問題，所有的額外的標記。同樣，額外的標記是插件在操作DOM之後生成的;這不是原始來源html。

如果你打電話給$('.slider').slider({，那麼該插件將被調用多個元素，這可能不是你的意圖。

來源

2013-05-31 03:20:07 mg1075

非常感謝！偉大的偵探技巧，順便說一句。當你猜測我使用了Chromes「Inspect Element」時，你是絕對正確的。（嘆氣） – That1guyoverthr

Bootstrap範圍滑塊css bug

回答

相關問題