Seiyria Bootstrap 滑块条标签在引导模式中未正确显示

Question

我正在使用 Seiyria Bootstrap 滑块，如下所示。问题是，当我单击按钮打开 Bootstrap 模式时，滑块标签在左侧堆叠在一起，如打印屏幕所示。但是，如果我左键或右键单击模态上的任意位置，它会正确显示它。此外，我尝试在模态之外使用示例代码，效果很好。我从这个网站得到了这个例子（例 19）。引导程序Version 3.3.7。

<div class="modal fade" id="exampleModalLong">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="form-group">
          <span id="ex18-label-1" class="hidden">Example slider label</span>
          <input id="ex19" type="text" data-provide="slider" data-slider-ticks="[1, 2, 3]" data-slider-ticks-labels='["short", "medium", "long"]' data-slider-min="1" data-slider-max="3" data-slider-step="1" data-slider-value="3" data-slider-tooltip="hide" />
        </div>
      </div>
    </div>
  </div>
</div>

<button onClick="$('#exampleModalLong').modal();">click</button>

滑块版本：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/css/bootstrap-slider.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/bootstrap-slider.min.js"></script>

这是当我单击按钮打开模态时滑块的显示方式。

预期结果 - 此外，当我单击它时，它显示为这样。

我试图检查和修复标签，但没有成功。如果有人能告诉我我可能做错了什么，我会适当的。

Answer 1

你不见了data-slider-ticks-positions。添加它，它可以正常工作。

<input id="ex19" 
       type="text"
       data-provide="slider"
       data-slider-ticks="[1, 2, 3]"
       data-slider-ticks-labels='["short", "medium", "long"]'
       data-slider-ticks-positions="[0,50,100]"
       data-slider-min="1"
       data-slider-max="3"
       data-slider-step="1"
       data-slider-value="3"
       data-slider-tooltip="hide" />