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

回答

相关问题