Question

我已经写了这个html并包含了cdn的所有文件，但是我仍然看到没有粘性标签的滑块，所以我错过了什么？

<!doctype html>
<html lang="en">
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.4.2/css/bootstrap-slider.css">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.4.2/bootstrap-slider.js"></script>

</head>
<body>
    <form>
        <div>
            Slider with single value and label:<br/><br/>
            <span id="ex18-label-1" class="hidden">
            Example slider label
          </span>
            <input id="ex18a" type="text" /><br/><br/><br/>
        </div>

    </form>

<script>
    $('#ex18a').slider({
        min  : 0,
        max  : 10,
        value: 5,
        labelledby: 'ex18-label-1'
    });

</script>
</body>
</html>

Full example

Answer 1

我正在进一步研究此问题，结果发现bootstrap-slider项目尚未与Bootstrap 4 100％兼容。该项目的贡献者正在研究它，看起来它已经完成了很大一部分，但是在将其发布到CDN之前，需要进行测试等等。查看GitHub at this link上的项目进度，以及有关工具提示问题here的更多信息。奇怪的是，您将需要使用Bootstrap 3，或者找到另一个已被证明可以与Bootstrap 4一起使用的库。

Answer 2

现在可以确认这仅适用于Bootstrap v3，更改链接的样式表足以在上方显示标签

$('#ex18a').slider({
  min: 0,
  max: 10,
  value: 5,
  labelledby: 'ex18-label-1'
});

<!doctype html>
<html lang="en">

<head>
  <!-- Bootstrap CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.4.2/css/bootstrap-slider.css">

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.4.2/bootstrap-slider.js"></script>

</head>

<body>
  <form>
    <div>
      Slider with single value and label:<br/><br/>
      <span id="ex18-label-1" class="hidden">
            Example slider label
          </span>
      <input id="ex18a"  type="text" /><br/><br/><br/>
    </div>

  </form>

  <script>
  </script>
</body>

</html>

Bootstrap滑块不加载

2 个答案: