twitter-bootstrap - 使用引导滑块作为下拉菜单

Question

我正在使用垂直方向的引导滑块（ http://www.eyecon.ro/bootstrap-slider/ ）。一切都很好，除了将它用作下拉菜单。当我在下拉后移动滑块时，它不是我按下的确切位置。这是一个错误吗？查看普通和下拉菜单之间的区别jsfiddle

Answer 1

看起来滑块不喜欢位于任何具有 aposition: relative;或分别position: absolute由.btn-groupand应用的东西的内部.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>