使用引導滑塊作爲下拉菜單

Question

我使用垂直方向的引導滑塊（http://www.eyecon.ro/bootstrap-slider/）。除了將它用作下拉菜單外，一切都可以。當我在下拉菜單後移動滑塊時，它不是我按下的確切位置。它是一個錯誤嗎？看到正常的和下拉的一個之間的不同上jsfiddle

Answer 1

它看起來像滑塊不喜歡被的任何有內部的position: relative;或position: absolute，其正在被.btn-group和.dropdown-menu分別施加。

A 非常不好的修復程序爲此將擺脫這些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>