Question

我在我的网站上使用bootstrap，我创建了一个新的下拉按钮，我在标题中添加了，我的问题是当我点击下拉菜单出现在其他元素下面时，我会在这里添加一个图像，看看是什么问题 enter image description here ，我认为问题是z-index：

这是我的HTML代码：

<div class="page">
        <div class="header-container">
            <div class="container">
                <div class="row">
                    <div class="header">
                        <div class="col-md-4 col-md-offset-0">
                            <div class="dropdown">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

The problem is with the wrapper. It has a property overflow: hidden which hides anything that is outside its area. Remove this and it will work. Not a z-index problem.

.wrapper {
  overflow: hidden; // Remove
  width: 100%;
}

Overlapping menu

Answer 2

Try it This Code in your header

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Dropdowns within Navs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bs-example">
    <ul class="nav nav-pills">
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">Inbox</a></li>
                <li><a href="#">Drafts</a></li>
                <li><a href="#">Sent Items</a></li>
                <li class="divider"></li>
                <li><a href="#">Trash</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

bootstrap z-index问题，标题中有下拉按钮

2 个答案: