html - 根据 CSS 中的顶部导航栏调整侧边栏位置
问题描述
我可以制作一个侧边栏和响应式顶部导航栏,但在较小的视口(移动设备、平板电脑)上,侧边栏不会根据顶部导航栏的位置调整其位置。
我已使用固定值将其固定在左侧,但这也使其无法在较小的屏幕上调整高度,顶部导航栏和侧边栏内容区域之间出现间隙
调整大小时,如何使此侧边栏响应顶部导航栏?
这是我的代码:
https://www.codeply.com/go/XHDeSP3Fzv
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dorami - Nền tảng quản lý bán hàng và kho vận</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style type="text/css">
nav div ul li a.nav-link {
color: white;
padding: 1rem;
}
nav div ul li a.nav-link:hover {
background-color: #004d40;
}
body {
padding-top: 50px;
padding-left: 80px;
}
.navbar {
background-color: #00695c;
}
.sidenav {
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 60px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 50px; /* Stay at the top */
left: 0;
background-color: #4e342e; /* Black */
overflow-x: auto; /* Disable horizontal scroll */
}
.sidenav a {
text-decoration: none;
font-size: 16px;
color: white;
display: block;
padding: 20px 0;
}
.sidenav a:hover {
background-color: #3e2723;
}
</style>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-sm py-0">
<a class="navbar-brand" href="/dashboard/">
<img src="/images/logo.webp" width="40" height="40" alt="">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item px-2">
<a class="nav-link" href="#">Shop Manager</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="#">Customer Care</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="#">Messenger Order</a>
</li>
</ul>
</div>
</nav>
<div class="sidenav">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
解决方案
这是更新的代码,您需要稍微修改一下 CSS。我们从不将 Padding 或 margin 与 HTML/BODY 标签一起使用。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dorami - Nền tảng quản lý bán hàng và kho vận</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
html,body {
padding: 0;
margin: 0;
}
nav div ul li a.nav-link {
color: white;
padding: 0;
line-height: 50px;
}
nav div ul li a.nav-link:hover {
background-color: #004d40;
}
.fixed-top{
height: 50px;
}
.sidenav {
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 60px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 50px; /* Stay at the top */
left: 0;
background-color: #4e342e; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
}
.sidenav a {
text-decoration: none;
font-size: 16px;
color: white;
display: block;
padding: 20px 0;
}
.sidenav a:hover {
background-color: #3e2723;
}
</style>
</head>
<body>
<div>
<nav class="navbar fixed-top navbar-expand-lg py-0" style="background-color: #00695c;">
<a class="navbar-brand" href="/dashboard/">
<img src="/images/logo.webp" width="40" height="40" alt="">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item px-2">
<a class="nav-link" href="#">Shop Manager</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="#">Customer Care</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="#">Messenger Order</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="sidenav">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div class="content">
<h1>Hello</h1>
</div>
</body>
</html>
随意评论进一步查询
推荐阅读
- spring-boot - Lateinit 卡夫卡监听器
- javascript - 反应水平滚动组件不可见
- reactjs - 我一直在尝试在我的反应顺风应用程序上运行“npm run build”,它一直在向我显示以下错误
- karate - 将 jsMap 导出为 json
- css - 位置:粘性;在路由器插座子组件中不起作用
- python - 为什么尽管放置了 subplot() 方法却没有显示情节?
- c# - 浮点数组到excel中的列(范围)
- git - 如何签出(下载)git存储库目录内的单个文件
- python - 如何使用烧瓶 python 以 JSON 格式发送原始数据。在 params 中发送数据时,它将数据作为表单数据(键值对)发送
- python - 水平图例表的动态宽度 - Plotly Express