相关疑难解决方法(0)
Bootstrap下拉菜单出现在其他元素后面 - IE7
我正在使用Bootstrap 2.3.1 http://twitter.github.io/bootstrap/index.html
所以我正在使用他们的"下拉菜单"类来创建一些简单的快速使用下拉菜单,但由于某些原因,在IE7上,它们出现在我网站上的文本和其他元素后面.
测试链接: http ://leongaban.com/_projects/defakto/CDS/
我在我的CSS中添加了z-index,但似乎仍然没有做任何事情,请帮忙!
.header .header-nav ul#nav-account ul.dropdown-menu,
.header .header-nav ul#nav-library ul.dropdown-menu {
z-index: 10000;
}
IE9,Chrome,FF等现代无头痛的浏览器:
IE7> :(
HTML
<div class="header-nav">
<ul id="nav-account" role="navigation" class="pull-right">
<!-- Language Dropdown Button -->
<li id="language-btn">
<a href="#" id="drop1" class="dropdown-toggle" data-toggle="dropdown">English</a>
<img src="img/header-small-down-arrow.png" alt="grey triangle"/><!-- <span class="grey_triangle"></span>-->
<!-- Language Dropdown Menu-->
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">English</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Spanish</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">German</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Japanese</a></li>
<li …52
推荐指数
推荐指数
4
解决办法
解决办法
9万
查看次数
查看次数
处理twitter引导下拉截断的问题,容器上有溢出自动
Bootstrap下拉列表正在被修剪,我查看了以下问题中提到的所有选项,但没有奏效.
Twitter Bootstrap Button下拉z-index分层问题
Twitter bootstrap下拉菜单中的z-index问题
要求
- 我想在主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; …7
推荐指数
推荐指数
1
解决办法
解决办法
3928
查看次数
查看次数
隐藏在其他元素后面的Bootstrap下拉菜单
我有类似的问题本.但那里的解决方案对我的问题不起作用.该讨论已经结束,以获得进一步的建议.不幸的是,我无法完全按照jsfiddle显示我的代码.但问题是这样的.当尝试扩展第一个面板部分内的下拉列表时,隐藏在其他元素后面的下拉列表.我花了好几个小时尝试关于"堆叠上下文","位置"和"z-index"的不同建议.如果有人能指出任何有用的资源,我真的很感激.
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span data-bind="label">Select One</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Item 1</a>
</li>
<li><a href="#">Another item</a>
</li>
<li><a href="#">This is a longer item that will not fit properly</a>
</li>
</ul>
</div>
4
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
twitter引导下拉列表弹出元素
您可以在此屏幕截图中看到,每行上包含"hi"的菜单会弹出正文元素下方,也会弹出屏幕上的按钮.
dom结构如下所示:
打开时下拉元素的计算样式是:
background-color: transparent;
color: #999;
display: block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
height: 20px;
line-height: 20px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: visible;
overflow-y: visible;
position: relative;
width: 1425px;
这是弹出"下拉菜单"计算样式的项目之一:
box-sizing: border-box;
color: white;
cursor: pointer;
display: inline-block;
height: 22px;
line-height: 17px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
overflow-x: visible;
overflow-y: visible;
vertical-align: middle;
width: 74px;
word-spacing: 0px;
我似乎无法攻击正确的dom&css魔法来使这项工作正确.我一直在dom heirarchy中的位置,而在dropdown div的导航栏中.我也一直在下拉菜单,下拉菜单和弹出的元素上玩z-index.
我觉得有点像我在这里看不到的东西.有什么想法吗？
0
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数