导航栏 Bootstrap5 旁边的奇怪空格
[英]Weird blank space next to navbar Bootstrap5
问题描述
在使用左侧导航栏菜单构建此布局后，我发现在导航栏和主要内容区域之间留下了一个奇怪的空白区域。 有谁知道为什么会出现该空间以及如何将其带走？
这是代码片段： https://bbbootstrap.com/snippets/bootstrap-5-sidebar-menu-toggle-button-34132202
document.addEventListener("DOMContentLoaded", function(event) { const showNavbar = (toggleId, navId, bodyId, headerId) => { const toggle = document.getElementById(toggleId), nav = document.getElementById(navId), bodypd = document.getElementById(bodyId), headerpd = document.getElementById(headerId) // Validate that all variables exist if (toggle && nav && bodypd && headerpd) { toggle.addEventListener('click', () => { // show navbar nav.classList.toggle('show') // change icon toggle.classList.toggle('bx-x') // add padding to body bodypd.classList.toggle('body-pd') // add padding to header headerpd.classList.toggle('body-pd') }) } } showNavbar('header-toggle', 'nav-bar', 'body-pd', 'header') /*===== LINK ACTIVE =====*/ const linkColor = document.querySelectorAll('.nav_link') function colorLink() { if (linkColor) { linkColor.forEach(l => l.classList.remove('active')) this.classList.add('active') } } linkColor.forEach(l => l.addEventListener('click', colorLink)) // Your code to run since DOM is loaded and ready });
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap"); :root { --header-height: 3rem; --nav-width: 68px; --first-color: #4723D9; --first-color-light: #AFA5D9; --white-color: #F7F6FB; --body-font: 'Nunito', sans-serif; --normal-font-size: 1rem; --z-fixed: 100 } *, ::before, ::after { box-sizing: border-box } body { position: relative; margin: var(--header-height) 0 0 0; padding: 0 1rem; font-family: var(--body-font); font-size: var(--normal-font-size); transition: .5s } a { text-decoration: none }.header { width: 100%; height: var(--header-height); position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; background-color: var(--white-color); z-index: var(--z-fixed); transition: .5s }.header_toggle { color: var(--first-color); font-size: 1.5rem; cursor: pointer }.header_img { width: 35px; height: 35px; display: flex; justify-content: center; border-radius: 50%; overflow: hidden }.header_img img { width: 40px }.l-navbar { position: fixed; top: 0; left: -30%; width: var(--nav-width); height: 100vh; background-color: var(--first-color); padding: .5rem 1rem 0 0; transition: .5s; z-index: var(--z-fixed) }.nav { height: 100%; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden }.nav_logo, .nav_link { display: grid; grid-template-columns: max-content max-content; align-items: center; column-gap: 1rem; padding: .5rem 0.5rem 1.5rem }.nav_logo { margin-bottom: 2rem }.nav_logo-icon { font-size: 1.25rem; color: var(--white-color) }.nav_logo-name { color: var(--white-color); font-weight: 700 }.nav_link { position: relative; color: var(--first-color-light); margin-bottom: 1.5rem; transition: .3s }.nav_link:hover { color: var(--white-color) }.nav_icon { font-size: 1.25rem }.show { left: 0 }.body-pd { padding-left: calc(var(--nav-width) + 1rem) }.active { color: var(--white-color) }.active::before { content: ''; position: absolute; left: 0; width: 2px; height: 32px; background-color: var(--white-color) }.height-100 { height: 100vh } @media screen and (min-width: 768px) { body { margin: calc(var(--header-height) + 1rem) 0 0 0; padding-left: calc(var(--nav-width) + 2rem) }.header { height: calc(var(--header-height) + 1rem); padding: 0 2rem 0 calc(var(--nav-width) + 2rem) }.header_img { width: 40px; height: 40px }.header_img img { width: 45px }.l-navbar { left: 0; padding: 1rem 1rem 0 0 }.show { width: calc(var(--nav-width) + 156px) }.body-pd { padding-left: calc(var(--nav-width) + 188px) } }
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link href="./css/navlayout.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" rel="stylesheet"> <link rel="icon" href="./img/icon.png" /> <title>Basic - Bootstrap 5 with Gulp 4</title> </head> <body id="body-pd"> <header class="header" id="header"> <div class="header_toggle"> <i class='bx bx-menu' id="header-toggle"></i> </div> <div class="header_img"> <img src="https://i.imgur.com/hczKIze.jpg" alt=""> </div> </header> <div class="l-navbar" id="nav-bar"> <nav class="nav"> <div> <a href="#" class="nav_logo"> <i class='bx bx-layer nav_logo-icon'></i> <span class="nav_logo-name">BBBootstrap</span> </a> <div class="nav_list"> <a href="#" class="nav_link active"> <i class='bx bx-grid-alt nav_icon'></i> <span class="nav_name">Dashboard</span> </a> <a href="#" class="nav_link"> <i class='bx bx-user nav_icon'></i> <span class="nav_name">Users</span> </a> <a href="#" class="nav_link"> <i class='bx bx-message-square-detail nav_icon'></i> <span class="nav_name">Messages</span> </a> <a href="#" class="nav_link"> <i class='bx bx-bookmark nav_icon'></i> <span class="nav_name">Bookmark</span> </a> <a href="#" class="nav_link"> <i class='bx bx-folder nav_icon'></i> <span class="nav_name">Files</span> </a> <a href="#" class="nav_link"> <i class='bx bx-bar-chart-alt-2 nav_icon'></i> <span class="nav_name">Stats</span> </a> </div> </div> <a href="#" class="nav_link"> <i class='bx bx-log-out nav_icon'></i> <span class="nav_name">SignOut</span> </a> </nav> </div> <:--Container Main start--> <div class="height-100 bg-light"> <h4>Main Components</h4> </div> <.--Container Main end--> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script src="./js/navlayout.js"></script> </body>
1 个解决方案
解决方案1
0 2022-01-22 20:40:39
在这里，您是 go... 在下面的代码段中添加了评论。
document.addEventListener("DOMContentLoaded", function(event) { const showNavbar = (toggleId, navId, bodyId, headerId) => { const toggle = document.getElementById(toggleId), nav = document.getElementById(navId), bodypd = document.getElementById(bodyId), headerpd = document.getElementById(headerId) // Validate that all variables exist if (toggle && nav && bodypd && headerpd) { toggle.addEventListener('click', () => { // show navbar nav.classList.toggle('show') // change icon toggle.classList.toggle('bx-x') // add padding to body bodypd.classList.toggle('body-pd') // add padding to header headerpd.classList.toggle('body-pd') }) } } showNavbar('header-toggle', 'nav-bar', 'body-pd', 'header') /*===== LINK ACTIVE =====*/ const linkColor = document.querySelectorAll('.nav_link') function colorLink() { if (linkColor) { linkColor.forEach(l => l.classList.remove('active')) this.classList.add('active') } } linkColor.forEach(l => l.addEventListener('click', colorLink)) // Your code to run since DOM is loaded and ready });
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap"); :root { --header-height: 3rem; --nav-width: 68px; --first-color: #4723D9; --first-color-light: #AFA5D9; --white-color: #F7F6FB; --body-font: 'Nunito', sans-serif; --normal-font-size: 1rem; --z-fixed: 100 } *, ::before, ::after { box-sizing: border-box } body { position: relative; margin: var(--header-height) 0 0 0; padding: 0 0; /* Change "0 1rem" to "0 0". */ font-family: var(--body-font); font-size: var(--normal-font-size); transition: .5s } a { text-decoration: none }.header { width: 100%; height: var(--header-height); position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; background-color: var(--white-color); z-index: var(--z-fixed); transition: .5s }.header_toggle { color: var(--first-color); font-size: 1.5rem; cursor: pointer }.header_img { width: 35px; height: 35px; display: flex; justify-content: center; border-radius: 50%; overflow: hidden }.header_img img { width: 40px }.l-navbar { position: fixed; top: 0; left: -30%; width: var(--nav-width); height: 100vh; background-color: var(--first-color); padding: .5rem 1rem 0 0; transition: .5s; z-index: var(--z-fixed) }.nav { height: 100%; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden }.nav_logo, .nav_link { display: grid; grid-template-columns: max-content max-content; align-items: center; column-gap: 1rem; padding: .5rem 0.5rem 1.5rem }.nav_logo { margin-bottom: 2rem }.nav_logo-icon { font-size: 1.25rem; color: var(--white-color) }.nav_logo-name { color: var(--white-color); font-weight: 700 }.nav_link { position: relative; color: var(--first-color-light); margin-bottom: 1.5rem; transition: .3s }.nav_link:hover { color: var(--white-color) }.nav_icon { font-size: 1.25rem }.show { left: 0 }.body-pd { padding-left: calc(var(--nav-width) + 1rem) }.active { color: var(--white-color) }.active::before { content: ''; position: absolute; left: 0; width: 2px; height: 32px; background-color: var(--white-color) }.height-100 { height: 100vh } @media screen and (min-width: 768px) { body { margin: calc(var(--header-height) + 1rem) 0 0 0; padding-left: calc(var(--nav-width) + 0rem); /* Change "calc(var(--nav-width) + 2rem" to "calc(var(--nav-width) + 0rem". */ }.header { height: calc(var(--header-height) + 1rem); padding: 0 2rem 0 calc(var(--nav-width) + 2rem) }.header_img { width: 40px; height: 40px }.header_img img { width: 45px }.l-navbar { left: 0; padding: 1rem 1rem 0 0 }.show { width: calc(var(--nav-width) + 156px) }.body-pd { padding-left: calc(var(--nav-width) + 188px) } } /* Add this. */ #title { margin-left: 2rem; /* The same as header padding-left (ie, 2rem). */ margin-top: 4rem; /* The same as header height (ie, 3rem + 1rem). */ }
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link href="./css/navlayout.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" rel="stylesheet"> <link rel="icon" href="./img/icon.png" /> <title>Basic - Bootstrap 5 with Gulp 4</title> </head> <body id="body-pd"> <header class="header" id="header"> <div class="header_toggle"> <i class='bx bx-menu' id="header-toggle"></i> </div> <div class="header_img"> <img src="https://i.imgur.com/hczKIze.jpg" alt=""> </div> </header> <div class="l-navbar" id="nav-bar"> <nav class="nav"> <div> <a href="#" class="nav_logo"> <i class='bx bx-layer nav_logo-icon'></i> <span class="nav_logo-name">BBBootstrap</span> </a> <div class="nav_list"> <a href="#" class="nav_link active"> <i class='bx bx-grid-alt nav_icon'></i> <span class="nav_name">Dashboard</span> </a> <a href="#" class="nav_link"> <i class='bx bx-user nav_icon'></i> <span class="nav_name">Users</span> </a> <a href="#" class="nav_link"> <i class='bx bx-message-square-detail nav_icon'></i> <span class="nav_name">Messages</span> </a> <a href="#" class="nav_link"> <i class='bx bx-bookmark nav_icon'></i> <span class="nav_name">Bookmark</span> </a> <a href="#" class="nav_link"> <i class='bx bx-folder nav_icon'></i> <span class="nav_name">Files</span> </a> <a href="#" class="nav_link"> <i class='bx bx-bar-chart-alt-2 nav_icon'></i> <span class="nav_name">Stats</span> </a> </div> </div> <a href="#" class="nav_link"> <i class='bx bx-log-out nav_icon'></i> <span class="nav_name">SignOut</span> </a> </nav> </div> <:--Container Main start--> <div class="height-100 bg-light"> <h4 id="title">Main Components</h4> </div> <.--Container Main end--> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script src="./js/navlayout.js"></script> </body>
第二个选项卡上的 Bootstrap5 选项卡内容创建无限的空白
[英]Bootstrap5 tab content on second tab creates unlimited white space
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.