Seiyria Bootstrap滑块条标签在bootstrap模式中无法正确显示

时间:2018-01-18 02:02:56

标签: html css twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

我正在使用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>

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

enter image description here

预期结果 - 此外,当我点击它时会显示如下。

enter image description here

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

1 个答案:

答案 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" />