引导范围滑块 css 错误答案

【问题标题】：Bootstrap range slider css bug引导范围滑块 css 错误
【发布时间】：2013-05-31 03:00:59
【问题描述】：

Eyecon 的 Bootstrap 范围滑块将多个滑块相互叠加。在此处查看运行中的错误：http://jsfiddle.net/GqMHM/

我从作者站点获取源代码，以及此站点上的示例：http://www.qualitylink.com.br/slider/slider.html

在我的一生中，我无法弄清楚为什么在我的所有测试环境中都会看到这个 css 错误。

<!-- Notice this exact example works perfectly@ 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>

【问题讨论】：

嗨@user 欢迎来到SO。我看不到您描述的错误，看起来一切正常。有两个滑块，因为显然它是一个值范围。源代码只显示了两个滑块，而不是“多个滑块相互叠加”。

标签： javascript twitter-bootstrap slider

【解决方案1】：

从您的问题中很难看出您要做什么，但这是你的小提琴的一个叉子，我想这就是你期望看到的。

http://jsfiddle.net/Aq6fu/

唯一的变化是：消除了您添加到原始小提琴中的所有额外 html 标记。

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

我在这里猜测，但也许你没有做一个视图源，而是用谷歌浏览器做了一个检查元素，并复制了 生成的 标记而不是原始标记html 标记。

原始标记只有一个具有.slider 类的元素，但生成的标记具有两个具有.slider 类的元素。

如果您查看问题中链接的源代码 - view-source:http://www.qualitylink.com.br/slider/slider.html - 您可以看到该页面上的 html 没有在您的问题中包含所有额外的标记.同样，额外的标记是插件在操作 DOM 后生成的；这不是原始来源html。

如果你调用$('.slider').slider({，那么插件会被多个元素调用，这可能不是你的意图。

【讨论】：

非常感谢！很棒的侦探技巧，顺便说一句。当你猜我使用 Chrome 的“检查元素”时，你是绝对正确的..（叹气）