Question

我使用垂直方向的bootstrap-slider（http://www.eyecon.ro/bootstrap-slider/）。一切都还可以，除了将它作为下拉菜单使用。当我在下拉菜单后移动滑块时，它不是我按下的确切位置。这是一个错误吗？查看jsfiddle

上的正常和下拉列表之间的差异

Answer 1

看起来滑块不喜欢位于position: relative;或position: absolute分别由.btn-group和.dropdown-menu应用的任何内容。

非常糟糕的解决方法对于这将是摆脱那些css属性，但是，它可能是一个错误。

$(function () {
    $(".slider").slider();
});

.fix-position.btn-group,
.fix-position .dropdown-menu {
  position: initial !important;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//seiyria.github.io/bootstrap-slider/stylesheets/bootstrap-slider.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//seiyria.github.io/bootstrap-slider/javascripts/bootstrap-slider.js"></script>

<div class="container">
  <div class="row">

    <div class="col-xs-4">
      <h3>Working</h3>
      <input type="text" value="" class="slider"
             data-toggle="slider"
             data-slider-min="0" data-slider-max="100" 
             data-slider-step="1" data-slider-value="100" 
             data-slider-orientation="vertical" />

    </div>

    <div class="col-xs-4">
      <h3>Dropdown - Broken</h3>
      <div class="btn-group btn-group-sm">
        <button class="btn btn-default btn-sm dropdown-toggle"
                id="testDropdownMenu" data-toggle="dropdown">
          <b class="caret"></b>
        </button>

        <div class="dropdown-menu" aria-labelledby="testDropdownMenu">
          <input type="text" value="" class="slider"
                 data-toggle="slider"
                 data-slider-min="0" data-slider-max="100" 
                 data-slider-step="1" data-slider-value="100" 
                 data-slider-orientation="vertical" />
        </div>
      </div>
    </div>

    <div class="col-xs-4">
      <h3>Dropdown - Working</h3>
      <div class="btn-group btn-group-sm fix-position">
        <button class="btn btn-default btn-sm dropdown-toggle"
                id="testDropdownMenu" data-toggle="dropdown">
          <b class="caret"></b>
        </button>

        <div class="dropdown-menu" aria-labelledby="testDropdownMenu">
          <input type="text" value="" class="slider"
                 data-toggle="slider"
                 data-slider-min="0" data-slider-max="100" 
                 data-slider-step="1" data-slider-value="100" 
                 data-slider-orientation="vertical" />
        </div>
      </div>
    </div>
    
  </div>
</div>

使用bootstrap-slider作为下拉菜单

1 个答案: