大佬教程收集整理的这篇文章主要介绍了jquery – 处理twitter引导程序下拉截断的问题,容器上有溢出自动，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
Bootstrap drop down cutting off
Twitter Bootstrap Button dropdown z-index layering issue
z-index issue with twitter bootstrap dropdown menu
要求
>我想在主div中滚动
>我希望bootstrap下拉不被剪裁
>不应更改div和下拉列表的高度宽度
Plunker：
http://plnkr.co/edit/HOKKYJ?p=preview
<!DOCTYPE html>
<html>
<head>
<title>Clipping problem</title>
<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script>
angular.module("myApp",[]).controller("MainCtrl",function($scopE) {
});
</script>
</head>
<body style="height:100%;" ng-app="myApp">
<div style="BACkground: indianred; position: relative; left:40%; height: 200px; width: 250px; overflow-y: auto;">
<div ng-repeat="num in [1,2,3,4,5]">
<div style="BACkground: bisque; margin:5px; height: 50px;">
<div style="position: relative; float: right">
<button class="dropdown-toggle" data-toggle="dropdown">Click me Brother...!!</button>
<div class="dropdown-menu">
<div style="text-wrap: none; white-space: Nowrap;">I am a text......................................!!</div>
<div style="text-wrap: none;white-space: Nowrap;">I am a also text.................................!!</div>
<div style="text-wrap: none;white-space: Nowrap;">Another text........................................................................................!!</div>
<div style="text-wrap: none;white-space: Nowrap;">One more text.............................!!</div>
<div style="text-wrap: none;white-space: Nowrap;">Aha one more text...........................................................................!!</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
有问题：
我想要什么：
提前致谢
我使用Bootstrap 3并且与具有溢出auto的div容器有同样的问题.它包含必须从容器中弹出的下拉列表.
解
解决方案是设置位置：固定到下拉列表,然后在点击时使用jQuery计算坐标.坐标是使用offset()计算的,因此它相对于文档窗口而不是父元素.
此解决方案可能也适用于溢出：隐藏容器.
CSS
@L_959_14@mecontainer .dropdown-menu { position:fixed; }
jQuery的
$("@L_959_14@mecontainer .dropdown").on('click',function() {
$(this).find('.dropdown-menu').css('top',$(this).offset().top);
$(this).find('.dropdown-menu').css('left',$(this).offset().left);
});
Optionaly添加此项以隐藏窗口大小调整的下拉列表：
$( window ).resize(function() { $('@L_959_14@mecontainer .dropdown-menu').parent().removeClass('open'); });
以上是大佬教程为你收集整理的jquery – 处理twitter引导程序下拉截断的问题,容器上有溢出自动全部内容，希望文章能够帮你解决jquery – 处理twitter引导程序下拉截断的问题,容器上有溢出自动所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。