在引导程序中制作固定的导航栏和侧栏
[英]Make a fixed navbar and sidebar in bootstrap
问题描述
我只想固定navbar和sidebar即使用户向下滚动页面也是如此。 而且反应灵敏。 在不更改导航栏和侧边栏的设计的情况下该如何做？ 有人可以使用引导程序为我解决问题吗？ 这是我的小提琴https://jsfiddle.net/exyvat08/17/
<div class="d-flex" id="wrapper">
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading"><a href="#" class="navbar-left text-dark"><img class="mx-auto d-block" src="../images/logo.jpg" id="logo"></a></div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Dashboard</a>
<a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">User</a>
<a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Supplier</a>
<a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Purchase Order</a>
<a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Reports</a>
</div>
原创设计
2 个解决方案
解决方案1
0 2019-08-12 06:44:27
更改CSS使其如下所示：
.navbar{
position: fixed;
left: 0px; /* the key here is to make left and right '0px' */
right: 0px;
background: linear-gradient(to top right,#0084ff,#0084ff);
}
.content-container{ /* change this to be the container of your content */
margin-top: 57px /* 57px is just the height of your navbar */
}
小提琴 ： https : //jsfiddle.net/exyvat08/17/
解决方案2
0 2019-08-12 08:14:02
我已经使用position fixed和width calc固定了侧边栏和导航栏
$("#menu-toggle").click(function(e) { e.preventDefault(); $("#wrapper").toggleClass("toggled"); if (e.target.innerText == "Show Menu") { e.target.innerText = "Hide Menu"; } else { e.target.innerText = "Show Menu"; } });
body { height: 100%; overflow-x: hidden; font-family: sans-serif; } #logo { width: 160px; height: 150px; border-radius: 50%; } #page-content-wrapper { margin-left: 241px; width: calc(100% - 241px); } #sidebar-wrapper { min-height: 100vh; margin-left: -15rem; -webkit-transition: margin .25s ease-out; -moz-transition: margin .25s ease-out; -o-transition: margin .25s ease-out; transition: margin .25s ease-out; position:fixed; z-index: 1; height:100vh; } #sidebar-wrapper .sidebar-heading { padding: 0.875rem 1.25rem; font-size: 1.2rem; } #sidebar-wrapper .list-group { width: 15rem; } #page-content-wrapper { min-width: 100vw; } #wrapper.toggled #sidebar-wrapper { margin-left: 0; } .navbar { background: linear-gradient(to top right, #0084ff, #0084ff); position: fixed !important; width: calc(100% - 241px); top:0px; } @media (min-width: 768px) { #sidebar-wrapper { margin-left: 0; } #page-content-wrapper { min-width: 0; width: 100%; } #wrapper.toggled #sidebar-wrapper { margin-left: -15rem; } }
<!DOCTYPE html> <html> <head> <title></title> <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"> </head> <body> <body> <div class="d-flex" id="wrapper"> <div class="bg-light border-right" id="sidebar-wrapper"> <div class="sidebar-heading"><a href="#" class="navbar-left text-dark"><img class="mx-auto d-block" src="../images/logo.jpg" id="logo"></a></div> <div class="list-group list-group-flush"> <a href="<?php echo url_for('admin/index.php')?>" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold"><i class="fas fa-tachometer-alt"></i>Dashboard</a> <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">User</a> <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Supplier</a> <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Purchase Order</a> <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Reports</a> </div> </div> <!-- /#sidebar-wrapper --> <!-- Page Content --> <div id="page-content-wrapper"> <nav class="navbar navbar-expand-lg navbar-light bg-success border-bottom"> <button class="btn btn-outline-light btn-sm" id="menu-toggle">Hide Menu</button> <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 ml-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link text-light" href=""><i class="fas fa-home"></i> Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link text-light"><i class="fas fa-building"></i> Contact</a> </li> <li class="nav-item dropdown"> <a class="btn nav-link dropdown-toggle text-light" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user"></i> John Doe </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">See Profile</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Logout</a> </div> </li> </ul> </div> </nav> <h1> test </h1> <h1> test </h1> <h1> test </h1> <h1> test </h1> <h1> test </h1> <h1> test </h1> <h1> test </h1> <h1> test </h1> <h1> test </h1> <h1> test </h1> <h1> test </h1> <h1> test </h1> <h1> test </h1> <h1> test </h1> </body> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
如何在引导程序 4 中仅使中心面板可滚动，但将导航栏和侧边栏保持在固定位置？
[英]How to make only center panel scrollable in bootstrap 4, but keep navbar and sidebar on the fixed positions?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.