Я экспериментирую с примером Codeply боковой панели.
Мне нужна рабочая полоса прокрутки на боковой панели.
Мне нужна боковая панель, как показано на боковой панели w3schools - I также добавили скриншот к этому вопросу.
В примере используется Bootstrap 4.3.1 . Таким образом, любая помощь будет оценена. Я также не хочу препятствовать внешнему виду footer . Я ищу любое рабочее решение с моей Ожидаемой боковой панелью
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});
body, html {
height:100%;
}
/*
* Off Canvas sidebar at medium breakpoint
* --------------------------------------------------
*/
@media screen and (max-width: 992px) {
.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%;
}
}
/*
* 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-md 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" href="#" title="Free Bootstrap 4 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" href="#">Home <span class="sr-only">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="//www.codeply.com">Link</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#myAlert" data-toggle="collapse">Alert</a>
</li>
<li class="nav-item">
<a class="nav-link" 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 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="#">1 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">2 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">3 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">4 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">5 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">6 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">7 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">8 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">9 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">10 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">11 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">12 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">13 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">14 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">15 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">16 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">17 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">18 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">19 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">20 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">21 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">22 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">23 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">24 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">25 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">26 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">27 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">28 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">29 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">30 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">31 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">32 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">33 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">34 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">35 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">36 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">37 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">38 Themes</a></li>
</ul>
</div>
<!--/col-->
<div class="col main pt-5 mt-3">
<h1 class="display-4 d-none d-sm-block">
Bootstrap 4 Dashboard
</h1>
<p class="lead d-none d-sm-block">Plus off-canvas sidebar, based on Bootstrap v4</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-->
<hr>
<div class="row placeholders mb-3">
<div class="col-6 col-sm-3 placeholder text-center">
<img src="//placehold.it/200/dddddd/fff?text=1" class="mx-auto img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Responsive</h4>
<span class="text-muted">Device agnostic</span>
</div>
<div class="col-6 col-sm-3 placeholder text-center">
<img src="//placehold.it/200/e4e4e4/fff?text=2" class="mx-auto img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Frontend</h4>
<span class="text-muted">UI / UX oriented</span>
</div>
<div class="col-6 col-sm-3 placeholder text-center">
<img src="//placehold.it/200/d6d6d6/fff?text=3" class="mx-auto img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>HTML5</h4>
<span class="text-muted">Standards-based</span>
</div>
<div class="col-6 col-sm-3 placeholder text-center">
<img src="//placehold.it/200/e0e0e0/fff?text=4" class="center-block img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Framework</h4>
<span class="text-muted">CSS and JavaScript</span>
</div>
</div>
<a id="features"></a>
<hr>
<p class="lead mt-5">
Are you ready for Bootstap 4? It's the 4th generation of this popular responsive framework. Bootstrap 4 will include some interesting
new features such as flexbox, 5 grid sizes (now including xl), cards, `em` sizing, CSS normalization (reboot) and larger font
sizes.
</p>
<div class="row my-4">
<div class="col-lg-3 col-md-4">
<div class="card">
<img class="card-img-top img-fluid" src="//placehold.it/740x180/bbb/fff?text=..." alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Layouts</h4>
<p class="card-text">Flexbox provides simpler, more flexible layout options like vertical centering.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="card card-inverse bg-inverse mt-3">
<div class="card-body">
<h3 class="card-title">Flexbox</h3>
<p class="card-text">Flexbox is now the default, and Bootstrap 4 supports SASS out of the box.</p>
<a href="#" class="btn btn-outline-secondary">Outline</a>
</div>
</div>
</div>
<div class="col-lg-9 col-md-8">
<div class="table-responsive">
<table class="table table-striped">
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>Label</th>
<th>Header</th>
<th>Column</th>
<th>Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>responsive</td>
<td>bootstrap</td>
<td>cards</td>
<td>grid</td>
</tr>
<tr>
<td>1,002</td>
<td>rwd</td>
<td>web designers</td>
<td>theme</td>
<td>responsive</td>
</tr>
<tr>
<td>1,003</td>
<td>free</td>
<td>open-source</td>
<td>download</td>
<td>template</td>
</tr>
<tr>
<td>1,003</td>
<td>frontend</td>
<td>developer</td>
<td>coding</td>
<td>card panel</td>
</tr>
<tr>
<td>1,004</td>
<td>migration</td>
<td>bootstrap 4</td>
<td>mobile-first</td>
<td>design</td>
</tr>
<tr>
<td>1,005</td>
<td>navbar</td>
<td>sticky</td>
<td>jumbtron</td>
<td>header</td>
</tr>
<tr>
<td>1,006</td>
<td>collapse</td>
<td>affix</td>
<td>submenu</td>
<td>flexbox</td>
</tr>
<tr>
<td>1,007</td>
<td>layout</td>
<td>examples</td>
<td>themes</td>
<td>grid</td>
</tr>
<tr>
<td>1,008</td>
<td>migration</td>
<td>bootstrap 4</td>
<td>flexbox</td>
<td>design</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!--/row-->
</div>
<!--/main col-->
</div>
</div>
<!--/.container-->
<footer class="container-fluid">
<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:bootsnipp@gmail.com"><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 facilitate the transactions between Seller and Customer/Buyer/User and is not and cannot be a party to or control in any manner any transactions between the Seller and the Customer/Buyer/User. All the offers and discounts on this Website have been extended by various Builder(s)/Developer(s) who have advertised their products. Element is only communicating the offers and not selling or rendering any of those products or services. It neither warrants nor is it making any representations with respect to offer(s) made on the site. Element Limited shall neither be responsible nor liable to mediate or resolve any disputes or disagreements between the Customer/Buyer/User and the Seller and both Seller and Customer/Buyer/User shall settle all such disputes without involving Element Limited in any manner.
</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>
<!-- 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>