我正在使用Seiyria Bootstrap滑块,如下所示。问题是,当我单击按钮打开Bootstrap模式时,滑块标签会在左侧堆叠在一起,如打印屏幕所示。但是,如果我左键或右键单击模态上的任何位置,它会正确显示它。另外,我试图在模态之外使用示例代码并且它工作正常。我从这个website. Bootstrap Version 3.3.7
获得了这个例子(例19)。
<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>
当我点击按钮打开模态时,这就是滑块的显示方式。
预期结果 - 此外,当我点击它时会显示如下。
我试图检查并修复标签但没有成功。如果有人能告诉我我可能做错了什么,我会说的。
答案 0 :(得分:1)
您缺少数据 - 滑块 - 刻度 - 位置。添加它,它可以正常工作。
<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" />