在Bootstrap 4中,要实现中央面板滚动而导航栏和侧边栏保持固定位置的效果,可以通过CSS来控制各个部分的定位和滚动行为。以下是实现这一效果的步骤:
position: fixed;
)可以让元素相对于视口固定位置。overflow
属性,可以控制内容的滚动行为。这种布局适用于需要固定导航栏和侧边栏,而中央面板内容需要滚动的页面,例如仪表盘、管理后台等。
.content
容器的高度设置正确,并且内容超出了容器的高度。z-index
值设置正确,使得导航栏在最上层,侧边栏在内容层之上。calc()
函数来动态计算内容的高度,确保减去导航栏和侧边栏的高度。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Navbar and Sidebar</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.navbar {
z-index: 1000;
}
.sidebar {
height: 100vh;
z-index: 999;
}
.content {
padding-top: 56px;
padding-bottom: 50px;
overflow-y: auto;
height: calc(100% - 106px);
}
</style>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<div class="row">
<div class="col-md-3 col-lg-2 bg-light sidebar fixed-bottom">
<p>Sidebar Content</p>
</div>
<div class="col-md-9 col-lg-10 offset-md-3 offset-lg-2 content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
<!-- 更多内容 -->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.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"></script>
</body>
</html>
通过以上步骤和代码示例,你可以实现一个具有固定导航栏和侧边栏,中央面板可滚动的页面布局。
领取专属 10元无门槛券
手把手带您无忧上云