引導程序問題，下拉菜單隱藏在另一個元素后面
[英]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.