引导程序问题，下拉菜单隐藏在另一个元素后面
[英]Bootstrap issue, dropdown menu is hidden behind another element
问题描述
我是使用Bootstrap框架进行开发的新手，但遇到了无法解决的问题。
我需要创建一个由两部分组成的页面：导航部分，内容部分。 内容部分应该是可滚动的，并且它由一些生成的数据（javascript）组成，因此代码如下：
function loaddata() { "use strict"; var i, divMain, divContent; divMain = document.getElementById("data"); for (i = 0; i < 100; i += 1) { divContent = document.createElement("div"); divContent.setAttribute("id", "div_content" + i); divContent.innerHTML += "Some data " + i; divMain.appendChild(divContent); } }
html, body { overflow-y: hidden; } #data { position: absolute; width: 100%; height: 95%; overflow-y: scroll; }
<script src="https://code.jquery.com/jquery-2.2.3.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <body onload="loaddata()"> <div class="nav"> <div class='btn-group' role='group' aria-label='...'> <button class='btn btn-default'>Button 1</button> <button class='btn btn-default'>Button 2</button> <div class='btn-group'> <button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>Button 3</button> <ul class='dropdown-menu'> <li><input type='checkbox' checked>Value 1</li> <li><input type='checkbox' checked>Value 2</li> <li><input type='checkbox' checked>Value 3</li> </ul> </div> </div> <div>Some text..............................................</div> <div>Some text..............................................</div> </div> <div id="data"> </div> </body>
通过将数据div的position属性更改为非固定或绝对值，我可以解决隐藏下拉菜单的问题，但是在这种情况下，数据不可滚动。
请指出正确的解决方案。
1 个解决方案
解决方案1
1 已采纳 2017-01-26 14:19:38
根据评论进行编辑：
将.nav设置为fixed ：
function loaddata() { "use strict"; var i, divMain, divContent; divMain = document.getElementById("data"); for (i = 0; i < 100; i += 1) { divContent = document.createElement("div"); divContent.setAttribute("id", "div_content" + i); divContent.innerHTML += "Some data " + i; divMain.appendChild(divContent); } }
html, body { overflow-y: auto; } #data { margin-top: 40px; width: 100%; height: 95%; /*overflow-y: scroll;*/ } .nav { position: fixed; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <body onload="loaddata()"> <div class="nav"> <div class='btn-group' role='group' aria-label='...'> <button class='btn btn-default'>Button 1</button> <button class='btn btn-default'>Button 2</button> <div class='btn-group'> <button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>Button 3</button> <ul class='dropdown-menu'> <li> <input type='checkbox' checked>Value 1</li> <li> <input type='checkbox' checked>Value 2</li> <li> <input type='checkbox' checked>Value 3</li> </ul> </div> </div> </div> <div id="data"> </div> </body>
如何将 append bootstrap 5 下拉菜单设置为特定元素。 当下拉元素位于溢出元素内时：隐藏
[英]How to append the bootstrap 5 dropdown menu to a specific element. when the dropdown element is inside an element with overflow: hidden
Bootstrap模式中选择的下拉列表隐藏在模态页脚后面
[英]Chosen dropdown within Bootstrap modal is hidden behind modal footer
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.