我使用垂直方向的引導滑塊(http://www.eyecon.ro/bootstrap-slider/)。除了將它用作下拉菜單外,一切都可以。當我在下拉菜單後移動滑塊時,它不是我按下的確切位置。它是一個錯誤嗎?看到正常的和下拉的一個之間的不同上jsfiddle
使用引導滑塊作爲下拉菜單
0
A
回答
0
它看起來像滑塊不喜歡被的任何有內部的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>
相關問題
- 1. Bootstrap navbar下拉菜單隱藏在引導滑塊後面
- 2. 引導下拉菜單不起作用
- 3. 移動平滑關閉動畫引導菜單下拉菜單
- 4. 引導下拉菜單UI工作但下拉菜單不起作用
- 5. 下拉菜單中引導
- 6. 引導下拉菜單
- 7. 滑塊涵蓋大型下拉菜單
- 8. 引導菜單中的下拉菜單不起作用
- 9. css引導滑塊菜單修復
- 10. 下拉菜單在...下拉菜單與引導
- 11. 隱藏在滑塊後面的IE下拉導航菜單
- 12. 如何使用表單作爲下拉式導航菜單?
- 13. z-index&overflow不能使用下拉菜單和滑塊
- 14. 導航欄上的引導下拉菜單不起作用
- 15. CSS平滑下拉菜單
- 16. 滑動下拉菜單
- 17. 引導下拉菜單活動類
- 18. jQuery的現有引導下拉菜單
- 19. jquery點擊引導下拉菜單
- 20. 引導下拉菜單大左旁
- 21. 列內的引導下拉菜單
- 22. 點擊引導菜單下拉動畫
- 23. 崩潰中的引導下拉菜單,
- 24. 引導菜單下拉問題
- 25. 引導定製的下拉菜單
- 26. 引導下拉菜單排查
- 27. 點擊動畫引導下拉菜單
- 28. 引導下拉菜單3級
- 29. 下拉菜單與Twitter引導
- 30. 引導下拉菜單 - 改變
這似乎是一個錯誤。也許報告https://github.com/seiyria/bootstrap-slider而不是原來的網站,因爲它看起來有點過時。 – baxang 2015-03-19 15:42:08
https://github.com/seiyria/bootstrap-slider/issues/340 – KyleMit 2015-03-20 12:48:47