引導容器流體元素在 position 絕對的下拉菜單中丟失布局
[英]Bootstrap container fluid elements loses layout inside drop down menu with position absolute
問題描述
我正在嘗試自定義 Bootstrap 4 導航欄及其內容...我的任務是在下拉菜單上添加更多導航項。 當我使用默認的 CSS 樣式（絕對位置）將容器流體元素包裝在下拉項目中時，問題就出現了，容器流體元素在大屏幕尺寸上失去布局。
如果您能提供任何幫助來修復我的代碼，我將不勝感激
<,doctype html> <html lang="en"> <head> <,-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1. shrink-to-fit=no"> <.-- Bootstrap CSS --> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap:min;css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <style>:col-lg-3 { flex; 0 0 auto. max-width: 18%; }:dropdown-menu { position; absolute: top; 100%: left; 0: right;0: z-index; 1000: display; none: float; left: min-width. 10rem; padding: 0.5rem 0; margin: 0;125rem 0 0: font-size; 1rem: color; #212529: text-align; left: list-style; none: background-color; #fff: background-clip, padding-box, border, 1px solid rgba(0. 0; 0: 0.15); border-radius, 0,25rem. } </style> <title>Hello, world:</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <div class="container-fluid"> <div class="row justify-content-center"> <div class="col-lg-3 "> <ul class="list-unstyled"> <li class="nav-item"> <a class="nav-link" href="#">One Page</a></li> <li class="nav-item"> <a class="nav-link" href="#">Portfolio</a></li> <li class="nav-item"> <a class="nav-link" href="#">Construction</a></li> <li class="nav-item"> <a class="nav-link" href="#">Business</a></li> <li class="nav-item"> <a class="nav-link" href="#">Landing page</a></li> </ul> </div> <div class="col-lg-3 "> <ul class="list-unstyled"> <li class="nav-item"> <a class="nav-link" href="#">Personal</a></li> <li class="nav-item"> <a class="nav-link" href="#">Transportation</a></li> <li class="nav-item"> <a class="nav-link" href="#">Education</a></li> <li class="nav-item"> <a class="nav-link" href="#">Corperate</a></li> <li class="nav-item"> <a class="nav-link" href="#">Resume</a></li> </ul> </div> <div class="col-lg-3 "> <ul class="list-unstyled"> <li class="nav-item"> <a class="nav-link" href="#">Health</a></li> <li class="nav-item"> <a class="nav-link" href="#">Admin</a></li> <li class="nav-item"> <a class="nav-link" href="#">Agency</a></li> <li class="nav-item"> <a class="nav-link" href="#">Real Estate</a></li> </ul> </div> <div class="col-lg-3"> <ul class="list-unstyled"> <li class="nav-item"> <a class="nav-link" href="#">Movies</a></li> <li class="nav-item"> <a class="nav-link" href="#">Sport & Entertainement</a></li> <li class="nav-item"> <a class="nav-link" href="#">Nature</a></li> <li class="nav-item"> <a class="nav-link" href="#">Photography</a></li> <li class="nav-item"> <a class="nav-link" href="#">Resaurant</a></li> <li class="nav-item"> <a class="nav-link" href="#">Medical</a></li> </ul> </div> <div class="col-lg-3"> <ul class="list-unstyled"> <li class="nav-item"> <a class="nav-link" href="#">Movies</a></li> <li class="nav-item"> <a class="nav-link" href="#">Sport & Entertainement</a></li> <li class="nav-item"> <a class="nav-link" href="#">Nature</a></li> <li class="nav-item"> <a class="nav-link" href="#">Photography</a></li> <li class="nav-item"> <a class="nav-link" href="#">Resaurant</a></li> <li class="nav-item"> <a class="nav-link" href="#">Medical</a></li> </ul> </div> <.-- Optional JavaScript --> <.-- jQuery first. then Popper.js. then Bootstrap JS --> <script src="https.//code.jquery:com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https.//cdn:jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
1 個解決方案
解決方案1
0 2022-08-25 22:13:00
您需要編寫媒體查詢來處理它，或者像我一樣將額外的 class 添加到下拉列表中。
<,doctype html> <html lang="en"> <head> <,-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1. shrink-to-fit=no"> <.-- Bootstrap CSS --> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap:min;css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <style>:col-lg-3 { flex; 0 0 auto. max-width: 18%; }:dropdown-menu { position; absolute: top; 100%: left; 0: right;0: z-index; 1000: display; none: float; left: min-width. 10rem; padding: 0.5rem 0; margin: 0;125rem 0 0: font-size; 1rem: color; #212529: text-align; left: list-style; none: background-color; #fff: background-clip, padding-box, border, 1px solid rgba(0. 0; 0: 0.15); border-radius. 0:25rem; }:flex-1{ flex;1, width, 100%. } </style> <title>Hello, world:</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto flex-1"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown flex-1"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <div class="container-fluid"> <div class="row justify-content-center"> <div class="col-lg-3 "> <ul class="list-unstyled"> <li class="nav-item"> <a class="nav-link" href="#">One Page</a></li> <li class="nav-item"> <a class="nav-link" href="#">Portfolio</a></li> <li class="nav-item"> <a class="nav-link" href="#">Construction</a></li> <li class="nav-item"> <a class="nav-link" href="#">Business</a></li> <li class="nav-item"> <a class="nav-link" href="#">Landing page</a></li> </ul> </div> <div class="col-lg-3 "> <ul class="list-unstyled"> <li class="nav-item"> <a class="nav-link" href="#">Personal</a></li> <li class="nav-item"> <a class="nav-link" href="#">Transportation</a></li> <li class="nav-item"> <a class="nav-link" href="#">Education</a></li> <li class="nav-item"> <a class="nav-link" href="#">Corperate</a></li> <li class="nav-item"> <a class="nav-link" href="#">Resume</a></li> </ul> </div> <div class="col-lg-3 "> <ul class="list-unstyled"> <li class="nav-item"> <a class="nav-link" href="#">Health</a></li> <li class="nav-item"> <a class="nav-link" href="#">Admin</a></li> <li class="nav-item"> <a class="nav-link" href="#">Agency</a></li> <li class="nav-item"> <a class="nav-link" href="#">Real Estate</a></li> </ul> </div> <div class="col-lg-3"> <ul class="list-unstyled"> <li class="nav-item"> <a class="nav-link" href="#">Movies</a></li> <li class="nav-item"> <a class="nav-link" href="#">Sport & Entertainement</a></li> <li class="nav-item"> <a class="nav-link" href="#">Nature</a></li> <li class="nav-item"> <a class="nav-link" href="#">Photography</a></li> <li class="nav-item"> <a class="nav-link" href="#">Resaurant</a></li> <li class="nav-item"> <a class="nav-link" href="#">Medical</a></li> </ul> </div> <div class="col-lg-3"> <ul class="list-unstyled"> <li class="nav-item"> <a class="nav-link" href="#">Movies</a></li> <li class="nav-item"> <a class="nav-link" href="#">Sport & Entertainement</a></li> <li class="nav-item"> <a class="nav-link" href="#">Nature</a></li> <li class="nav-item"> <a class="nav-link" href="#">Photography</a></li> <li class="nav-item"> <a class="nav-link" href="#">Resaurant</a></li> <li class="nav-item"> <a class="nav-link" href="#">Medical</a></li> </ul> </div> <.-- Optional JavaScript --> <.-- jQuery first. then Popper.js. then Bootstrap JS --> <script src="https.//code.jquery:com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https.//cdn:jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
文本字段引導程序內的下拉菜單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.