$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});body, html {
height:100%;
}
@media screen and (max-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -33%;
}
.row-offcanvas-left.active {
left: 33%;
margin-left: -6px;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 33%;
height: 100%;
overflow: auto;
}
}
/*
* Off Canvas wider at sm breakpoint
* --------------------------------------------------
*/
@media screen and (max-width: 34em) {
.row-offcanvas-left
.sidebar-offcanvas {
left: -45%;
}
.row-offcanvas-left.active {
left: 45%;
margin-left: -6px;
}
.sidebar-offcanvas {
width: 45%;
}
}
.card {
overflow:hidden;
}
.card-body .rotate {
z-index: 8;
float: right;
height: 100%;
}
.card-body .rotate i {
color: rgba(20, 20, 20, 0.15);
position: absolute;
left: 0;
left: auto;
right: -10px;
bottom: 0;
display: block;
-webkit-transform: rotate(-44deg);
-moz-transform: rotate(-44deg);
-o-transform: rotate(-44deg);
-ms-transform: rotate(-44deg);
transform: rotate(-44deg);
}<!DOCTYPE html>
<html lang="en">
<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">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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>
<!--<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary mb-3">-->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary mb-3">
<div class="flex-row d-flex">
<button type="button" class="navbar-toggler mr-2 " data-toggle="offcanvas" title="Toggle responsive left sidebar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand py-0" href="#" title="Free Bootstrap Admin Template">Admin Template</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link py-0" href="#">Home <span class="sr-only">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="//www.codeply.com">Link</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link py-0" href="#myAlert" data-toggle="collapse">Alert</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="" data-target="#myModal" data-toggle="modal">About</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid" id="main">
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-md-3 col-lg-2 sidebar-offcanvas vh-100 sticky-top overflow-auto bg-light pl-0" id="sidebar" role="navigation">
<ul class="nav flex-column sticky-top pl-0 pt-5 mt-3">
<li class="nav-item"><a class="nav-link" href="#">Overview</a></li>
<li class="nav-item">
<a class="nav-link" href="#submenu1" data-toggle="collapse" data-target="#submenu1">Reports▾</a>
<ul class="list-unstyled flex-column pl-3 collapse" id="submenu1" aria-expanded="false">
<li class="nav-item"><a class="nav-link" href="">Report 1</a></li>
<li class="nav-item"><a class="nav-link" href="">Report 2</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Analytics</a></li>
<li class="nav-item"><a class="nav-link" href="#">Export</a></li>
<li class="nav-item"><a class="nav-link" href="#">Snippets</a></li>
<li class="nav-item"><a class="nav-link" href="#">Flexbox</a></li>
<li class="nav-item"><a class="nav-link" href="#">Layouts</a></li>
<li class="nav-item"><a class="nav-link" href="#">Templates</a></li>
<li class="nav-item"><a class="nav-link" href="#">Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 3</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 4</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 5</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 6</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 7</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 8</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 9</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 10</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 11</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 12</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 13</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 14</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 15</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 16</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 17</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 18</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 19</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 20</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 21</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 22</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 23</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 24</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 25</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 26</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 27</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 28</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 29</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item 30</a></li>
</ul>
</div>
<!--/col-->
<main class="col main pt-5 mt-3">
<h1 class="display-4 d-none d-sm-block">
Bootstrap Dashboard
</h1>
<p class="lead d-none d-sm-block">Plus scrolling sidebar + footer, based on Bootstrap 4</p>
<div class="alert alert-warning fade collapse" role="alert" id="myAlert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<strong>Holy guacamole!</strong> It's free.. this is an example theme.
</div>
<div class="row mb-3">
<div class="col-xl-3 col-sm-6 py-2">
<div class="card bg-success text-white h-100">
<div class="card-body bg-success">
<div class="rotate">
<i class="fa fa-user fa-4x"></i>
</div>
<h6 class="text-uppercase">Users</h6>
<h1 class="display-4">134</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 py-2">
<div class="card text-white bg-danger h-100">
<div class="card-body bg-danger">
<div class="rotate">
<i class="fa fa-list fa-4x"></i>
</div>
<h6 class="text-uppercase">Posts</h6>
<h1 class="display-4">87</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 py-2">
<div class="card text-white bg-info h-100">
<div class="card-body bg-info">
<div class="rotate">
<i class="fa fa-twitter fa-4x"></i>
</div>
<h6 class="text-uppercase">Tweets</h6>
<h1 class="display-4">125</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 py-2">
<div class="card text-white bg-warning h-100">
<div class="card-body">
<div class="rotate">
<i class="fa fa-share fa-4x"></i>
</div>
<h6 class="text-uppercase">Shares</h6>
<h1 class="display-4">36</h1>
</div>
</div>
</div>
</div>
<!--/row-->
</main>
<!--/main col-->
<footer class="bg-light col-md-10 offset-md-2 py-2">
<p class="text-right small mb-0">©2016-2020 Company</p>
<section class="footers bg-light pt-5 pb-3">
<div class="container pt-5">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 footers-one">
<div class="footers-logo">
<img src="http://velikorodnov.com/html/autotrader/images/logo.png" alt="Logo" style="width:120px;">
</div>
<div class="footers-info mt-3">
<p>Cras sociis natoque penatibus et magnis Lorem Ipsum tells about the compmany right now the best.</p>
</div>
<div class="social-icons">
<a href="https://www.facebook.com/"><i id="social-fb" class="fa fa-facebook-square fa-2x social"></i></a>
<a href="https://twitter.com/"><i id="social-tw" class="fa fa-twitter-square fa-2x social"></i></a>
<a href="https://plus.google.com/"><i id="social-gp" class="fa fa-google-plus-square fa-2x social"></i></a>
<a href="mailto:[email protected]"><i id="social-em" class="fa fa-envelope-square fa-2x social"></i></a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2 footers-two">
<h5>Essentials </h5>
<ul class="list-unstyled">
<li><a href="maintenance.html">Search</a></li>
<li><a href="contact.html">Sell your Car</a></li>
<li><a href="about.html">Advertise with us</a></li>
<li><a href="about.html">Dealers Portal</a></li>
<li><a href="about.html">Post Requirements</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-2 footers-three">
<h5>Information </h5>
<ul class="list-unstyled">
<li><a href="maintenance.html">Register Now</a></li>
<li><a href="contact.html">Advice</a></li>
<li><a href="about.html">Videos</a></li>
<li><a href="about.html">Blog</a></li>
<li><a href="about.html">Services</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-2 footers-four">
<h5>Explore </h5>
<ul class="list-unstyled">
<li><a href="maintenance.html">News</a></li>
<li><a href="contact.html">Sitemap</a></li>
<li><a href="about.html">Testimonials</a></li>
<li><a href="about.html">Feedbacks</a></li>
<li><a href="about.html">User Agreement</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-2 footers-five">
<h5>Company </h5>
<ul class="list-unstyled">
<li><a href="maintenance.html">Career</a></li>
<li><a href="about.html">For Parters</a></li>
<li><a href="about.html">Terms</a></li>
<li><a href="about.html">Policy</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</section>
<section class="disclaimer bg-light border">
<div class="container">
<div class="row ">
<div class="col-md-12 py-2">
<small>
Disclaimer: Element Limited is only an intermediary offering its platform to
</small>
</div>
</div>
</div>
</section>
<section class="copyright border">
<div class="container">
<div class="row text-center">
<div class="col-md-12 pt-3">
<p class="text-muted">© 2018 xyz Software Pvt. Ltd.</p>
</div>
</div>
</div>
</section>
</footer>
</div>
</div>
<!--/.container-->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
</div>
<div class="modal-body">
<p>This is a dashboard layout for Bootstrap 4. This is an example of the Modal component which you can use to show content.
Any content can be placed inside the modal and it can use the Bootstrap grid classes.</p>
<p>
<a href="https://www.codeply.com/go/KrUO8QpyXP" target="_ext">Grab the code at Codeply</a>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary-outline" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 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>
</body>
</html><< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS8zVDZ6aS5naWYifQ==” alt =“在此处输入图像说明”>
我正在基于codeply示例制作WordPress主题，但是我需要一些CSS优化。在小屏幕或平板电脑上单击侧边栏切换按钮时，侧边栏实际上会渲染，但需要移至顶部才能查看。
我想并排查看侧边栏视图，而不会影响任何其他内容，侧边栏对PC而言效果很好，但对于上述问题，需要修改移动设备和平板电脑的视图。
侧边栏需要并排显示。至少该网站的用户不想再次回到顶部来查看侧栏。出乎我意料的是，侧边栏滚动在下面没有链接 [9下的nav-link。
好吧，这花了我比我想象的长得多的时间，所以我真的希望它会有所帮助。
使您的js代码成为：
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
$('.pl-0').toggleClass('active');
});
});
并将其添加到您的CSS中
.pl-0.active {
display: block;
position: absolute;
}
.pl-0 {
display: none;
}