页面页脚被侧边栏打断-我什么都不想要-用户不舒服-
所以，我想避免粘贴页脚。
我的页脚只贴在页面上，但被侧边栏打断。我的侧边栏是主题列表-指向其他页面的页面链接。
我不想在桌面或md屏幕上默认隐藏侧边栏，但是用汉堡包构建响应侧边栏对我来说是个挑战
body {
padding-top: 50px;
}
/*
* Style tweaks
* --------------------------------------------------
*/
html,
body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
min-height: 100vh;
}
body {
padding-top: 70px;
}
footer {
padding: 30px 0;
}
/*
* Off Canvas
* --------------------------------------------------
* Greater thav 768px shows the menu by default and also flips the semantics
* The issue is to show menu for large screens and to hide for small
* Also need to do something clever to turn off the tabs for when the navigation is hidden
* Otherwise keyboard users cannot find the focus point
* (For now I will ignore that for mobile users and also not worry about
* screen re-sizing popping the menu out.)
*/
@media screen and (min-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-right {
right: 25%;
}
.row-offcanvas-left {
left: 25%;
}
.row-offcanvas-right .sidebar-offcanvas {
right: -25%; /* 3 columns */
background-color: rgb(255, 255, 255);
}
.row-offcanvas-left .sidebar-offcanvas {
left: -25%; /* 3 columns */
background-color: rgb(255, 255, 255);
}
.row-offcanvas-right.active {
right: 0; /* 3 columns */
}
.row-offcanvas-left.active {
left: 0; /* 3 columns */
}
.row-offcanvas-right.active .sidebar-offcanvas {
background-color: rgb(254, 254, 254);
}
.row-offcanvas-left.active .sidebar-offcanvas {
background-color: rgb(254, 254, 254);
}
.row-offcanvas .content {
width: 75%; /* 9 columns */
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas.active .content {
width: 100%; /* 12 columns */
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 25%; /* 3 columns */
}
}
@media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-right {
right: 0;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -50%; /* 6 columns */
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -50%; /* 6 columns */
}
.row-offcanvas-right.active {
right: 50%; /* 6 columns */
}
.row-offcanvas-left.active {
left: 50%; /* 6 columns */
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 50%; /* 6 columns */
}
}
footer{
color: white;
}
footer a{
color: #bfffff;
}
footer a:hover{
color: white;
}
.footer-bottom{
background: #3d6277;
padding: 2em;
}
.footer-top{
background: #2d4958;
}
.footer-middle{
background: #3d6277;
padding-top: 2em;
color: white;
}<!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://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="wrap">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-md-3 pl-5 d-none d-md-inline sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group shadow bg-white rounded sticky-top">
<a href="#" class="list-group-item list-group-item-action">1 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">2 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">3 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">4 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">5 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">6 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">7 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">8 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">9 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">10 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">11 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">12 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">13 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">14 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">15 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">16 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">17 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">18 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">19 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">20 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">21 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">22 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">23 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">24 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">25 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">26 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">27 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">28 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">29 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">30 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">31 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">32 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">33 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">34 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">35 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">36 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">37 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">38 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">39 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">40 Lorem ipsum dolor sit amet consectetur</a>
</div>
</div>
<div class="col-md-6">
<div class="card shadow bg-white rounded">
<div class="card-body">
<p class="visible-xs"><button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas"><i class="fa fa-bars fa-2x"></i></button></p>
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="row justify-content-center">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia animi incidunt numquam porro fuga quibusdam sunt iste nihil et perferendis molestiae labore, accusantium neque corrupti ab quis vel. Laudantium voluptate, eius doloremque quia neque enim odit provident assumenda. Esse ipsum aut quas impedit. Voluptatum minus debitis iure at, voluptatem mollitia ullam optio ipsum. Provident nobis animi delectus sit porro asperiores, culpa deleniti, omnis obcaecati minima est voluptatem ipsum laboriosam quidem. Nisi officiis mollitia vitae voluptatum, maiores voluptates numquam earum, reprehenderit quis facilis dolor molestias illum id minus quaerat doloribus molestiae? Vero voluptatem ad libero facere ut odio in laborum ducimus nam, placeat provident nemo aspernatur maxime! Est magni, veniam quod illo eos totam officiis impedit temporibus voluptatum, dolores pariatur nostrum enim accusantium nam ut ab esse! Tempore nihil velit dolores necessitatibus dicta quaerat perspiciatis autem, vero alias dolorem nulla maiores odio animi accusamus, repellendus assumenda nemo dolore blanditiis architecto. Sint mollitia, eligendi sequi cupiditate perferendis animi dicta similique, veritatis ad quos nihil doloremque suscipit voluptatum eius dolor at dolores esse. Perspiciatis nam ab perferendis. Odio id itaque fugit blanditiis reiciendis amet quisquam delectus ex odit, repudiandae nisi sunt esse reprehenderit error vitae libero! Iusto in voluptate repellendus voluptates earum ipsam iure quia soluta aut qui sint excepturi eligendi deleniti, neque hic perspiciatis natus fugit ab reprehenderit! Aspernatur obcaecati reprehenderit quis corporis est natus saepe quas ipsum, magnam repellendus cumque iste eum minus assumenda dolores ab tenetur praesentium id inventore. Dolorem eligendi, nulla, alias autem id libero fugiat blanditiis aliquam, vel perferendis placeat veniam nisi. Assumenda voluptates a quo nam numquam ipsam dolorem deleniti commodi voluptate atque adipisci recusandae nostrum distinctio quisquam voluptas, omnis aspernatur iste dolorum officiis error quas ratione optio! Officia adipisci deserunt rem corporis dolorem. Odio, nulla libero architecto facilis similique omnis est nobis. Quam nemo quisquam dolor incidunt facere distinctio quos consectetur, magni eveniet. Tempore deleniti ducimus perferendis quos illum molestias excepturi, nobis repellendus quam, optio iure necessitatibus dolore vitae repellat nemo aperiam quisquam consequatur maiores. At ex, blanditiis, pariatur atque enim, distinctio ut necessitatibus quae quia corporis itaque natus consequuntur numquam molestiae? Quas fugiat reiciendis, officia distinctio ipsam corrupti eum, mollitia nemo veniam iste impedit tenetur asperiores ullam porro corporis ut quo fuga laudantium aut saepe eveniet iusto nam! Corporis quia at rerum, itaque fuga consequatur quod vel modi. Itaque reprehenderit voluptates nihil! Amet repellendus, cum nemo nesciunt at dolore eveniet est magnam totam eligendi recusandae eius consequuntur necessitatibus rem corporis laudantium tempore iusto, accusamus aut incidunt laboriosam? Totam eligendi porro tempora exercitationem laboriosam et incidunt obcaecati consequatur? Earum qui nulla esse repudiandae facilis! Culpa voluptas ipsa, reprehenderit veritatis unde vitae quis obcaecati. Iusto, facilis. Possimus accusamus perferendis vel facilis optio? Ipsam aut facere voluptate iure accusantium accusamus quis quasi, modi dolorem, dicta aliquid velit dolorum rerum delectus corporis facilis. Cum perspiciatis corporis, hic esse at officia fugit odio reprehenderit quasi mollitia omnis sint nam voluptas sunt ab adipisci saepe. Consectetur ullam quasi ducimus odit voluptatibus accusantium voluptate nihil nobis saepe, enim eos architecto minima voluptatum.</p>
<pre class="line-numbers">
<code class="language-cpp">
#include<iostream>
int i=0, j=0;
sum(int a, int b){
i=a;
j=b;
return i+j;
}
int main(){
int a, b;
std::cout"Sum of a and b is"+sum(a, b)
return 0;
}
</code>
</pre>
</div>
</div>
</div>
</div>
<div class="col-md-3 pl-5 d-none d-md-inline">
<ul class="list-group shadow bg-white rounded">
<a href="https://www.facebook.com" target="_blank" rel="noopener noreferrer" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="https://www.twitter.com" target="_blank" rel="noopener noreferrer" class="list-group-item list-group-item-action">Morbi leo risus</a>
<a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</ul>
</div>
</div><!--/row-->
</div><!-- /.container -->
</div>
<footer class="mainfooter footer" role="contentinfo">
<div class="footer-middle">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>Lorem ipsum dolor sit</h4>
<ul class="list-unstyled">
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor site</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column2-->
<div class="footer-pad">
<h4>Lorem ipsum dolor sit</h4>
<ul class="list-unstyled">
<li><a href="#">Lorem ipsum dolor sit</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column3-->
<div class="footer-pad">
<h4>Lorem ipsum dolor sit</h4>
<ul class="list-unstyled">
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column4-->
<div class="footer-pad">
<h4>Lorem ipsum dolor sit</h4>
<ul class="list-unstyled">
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li>
<a href="#"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-xs-12">
<!--Footer Bottom-->
<ul class="list-inline">
<li class="text-xs-center">© Copyright 2020 - Lorem ipsum dolor sit.com. All rights reserved.</li>
<li class="pull-right"><a href="https://twitter.com/Lorem ipsum dolor sit" target="_blank" rel="noopener noreferrer" style=>twitter</a></li>
<li class="pull-right"><a href="https://www.linkedin.com/company/Lorem ipsum dolor sit" target="_blank" rel="noopener noreferrer" style=>Linkedin</a></li>
<li class="pull-right"><a href="https://www.facebook.com/Lorem ipsum dolor sit" target="_blank" rel="noopener noreferrer" style=>facebook</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$('[data-toggle=offcanvas]').click(function () {
if ($('.sidebar-offcanvas').css('background-color') == 'rgb(255, 255, 255)') {
$('.list-group-item').attr('tabindex', '-1');
} else {
$('.list-group-item').attr('tabindex', '');
}
$('.row-offcanvas').toggleClass('active');
});
});
</script>
</body>
</html>如何测量height的.card以调整height的#sidebar？
看看。
$(document).ready(function(){
let sidebar = $("#sidebar");
let card = $(".card").parent();
sidebar.css({"height":card.height(), "overflow":"hidden"});
});body {
padding-top: 50px;
}
/*
* Style tweaks
* --------------------------------------------------
*/
html,
body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
min-height: 100vh;
}
body {
padding-top: 70px;
}
footer {
padding: 30px 0;
}
/*
* Off Canvas
* --------------------------------------------------
* Greater thav 768px shows the menu by default and also flips the semantics
* The issue is to show menu for large screens and to hide for small
* Also need to do something clever to turn off the tabs for when the navigation is hidden
* Otherwise keyboard users cannot find the focus point
* (For now I will ignore that for mobile users and also not worry about
* screen re-sizing popping the menu out.)
*/
@media screen and (min-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-right {
right: 25%;
}
.row-offcanvas-left {
left: 25%;
}
.row-offcanvas-right .sidebar-offcanvas {
right: -25%; /* 3 columns */
background-color: rgb(255, 255, 255);
}
.row-offcanvas-left .sidebar-offcanvas {
left: -25%; /* 3 columns */
background-color: rgb(255, 255, 255);
}
.row-offcanvas-right.active {
right: 0; /* 3 columns */
}
.row-offcanvas-left.active {
left: 0; /* 3 columns */
}
.row-offcanvas-right.active .sidebar-offcanvas {
background-color: rgb(254, 254, 254);
}
.row-offcanvas-left.active .sidebar-offcanvas {
background-color: rgb(254, 254, 254);
}
.row-offcanvas .content {
width: 75%; /* 9 columns */
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas.active .content {
width: 100%; /* 12 columns */
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 25%; /* 3 columns */
}
}
@media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-right {
right: 0;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -50%; /* 6 columns */
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -50%; /* 6 columns */
}
.row-offcanvas-right.active {
right: 50%; /* 6 columns */
}
.row-offcanvas-left.active {
left: 50%; /* 6 columns */
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 50%; /* 6 columns */
}
}
footer{
color: white;
}
footer a{
color: #bfffff;
}
footer a:hover{
color: white;
}
.footer-bottom{
background: #3d6277;
padding: 2em;
}
.footer-top{
background: #2d4958;
}
.footer-middle{
background: #3d6277;
padding-top: 2em;
color: white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="wrap">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-md-3 pl-5 d-none d-md-inline sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group shadow bg-white rounded sticky-top">
<a href="#" class="list-group-item list-group-item-action">1 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">2 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">3 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">4 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">5 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">6 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">7 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">8 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">9 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">10 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">11 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">12 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">13 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">14 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">15 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">16 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">17 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">18 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">19 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">20 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">21 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">22 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">23 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">24 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">25 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">26 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">27 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">28 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">29 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">30 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">31 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">32 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">33 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">34 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">35 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">36 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">37 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">38 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">39 Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">40 Lorem ipsum dolor sit amet consectetur</a>
</div>
</div>
<div class="col-md-6">
<div class="card shadow bg-white rounded">
<div class="card-body">
<p class="visible-xs"><button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas"><i class="fa fa-bars fa-2x"></i></button></p>
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="row justify-content-center">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia animi incidunt numquam porro fuga quibusdam sunt iste nihil et perferendis molestiae labore, accusantium neque corrupti ab quis vel. Laudantium voluptate, eius doloremque quia neque enim odit provident assumenda. Esse ipsum aut quas impedit. Voluptatum minus debitis iure at, voluptatem mollitia ullam optio ipsum. Provident nobis animi delectus sit porro asperiores, culpa deleniti, omnis obcaecati minima est voluptatem ipsum laboriosam quidem. Nisi officiis mollitia vitae voluptatum, maiores voluptates numquam earum, reprehenderit quis facilis dolor molestias illum id minus quaerat doloribus molestiae? Vero voluptatem ad libero facere ut odio in laborum ducimus nam, placeat provident nemo aspernatur maxime! Est magni, veniam quod illo eos totam officiis impedit temporibus voluptatum, dolores pariatur nostrum enim accusantium nam ut ab esse! Tempore nihil velit dolores necessitatibus dicta quaerat perspiciatis autem, vero alias dolorem nulla maiores odio animi accusamus, repellendus assumenda nemo dolore blanditiis architecto. Sint mollitia, eligendi sequi cupiditate perferendis animi dicta similique, veritatis ad quos nihil doloremque suscipit voluptatum eius dolor at dolores esse. Perspiciatis nam ab perferendis. Odio id itaque fugit blanditiis reiciendis amet quisquam delectus ex odit, repudiandae nisi sunt esse reprehenderit error vitae libero! Iusto in voluptate repellendus voluptates earum ipsam iure quia soluta aut qui sint excepturi eligendi deleniti, neque hic perspiciatis natus fugit ab reprehenderit! Aspernatur obcaecati reprehenderit quis corporis est natus saepe quas ipsum, magnam repellendus cumque iste eum minus assumenda dolores ab tenetur praesentium id inventore. Dolorem eligendi, nulla, alias autem id libero fugiat blanditiis aliquam, vel perferendis placeat veniam nisi. Assumenda voluptates a quo nam numquam ipsam dolorem deleniti commodi voluptate atque adipisci recusandae nostrum distinctio quisquam voluptas, omnis aspernatur iste dolorum officiis error quas ratione optio! Officia adipisci deserunt rem corporis dolorem. Odio, nulla libero architecto facilis similique omnis est nobis. Quam nemo quisquam dolor incidunt facere distinctio quos consectetur, magni eveniet. Tempore deleniti ducimus perferendis quos illum molestias excepturi, nobis repellendus quam, optio iure necessitatibus dolore vitae repellat nemo aperiam quisquam consequatur maiores. At ex, blanditiis, pariatur atque enim, distinctio ut necessitatibus quae quia corporis itaque natus consequuntur numquam molestiae? Quas fugiat reiciendis, officia distinctio ipsam corrupti eum, mollitia nemo veniam iste impedit tenetur asperiores ullam porro corporis ut quo fuga laudantium aut saepe eveniet iusto nam! Corporis quia at rerum, itaque fuga consequatur quod vel modi. Itaque reprehenderit voluptates nihil! Amet repellendus, cum nemo nesciunt at dolore eveniet est magnam totam eligendi recusandae eius consequuntur necessitatibus rem corporis laudantium tempore iusto, accusamus aut incidunt laboriosam? Totam eligendi porro tempora exercitationem laboriosam et incidunt obcaecati consequatur? Earum qui nulla esse repudiandae facilis! Culpa voluptas ipsa, reprehenderit veritatis unde vitae quis obcaecati. Iusto, facilis. Possimus accusamus perferendis vel facilis optio? Ipsam aut facere voluptate iure accusantium accusamus quis quasi, modi dolorem, dicta aliquid velit dolorum rerum delectus corporis facilis. Cum perspiciatis corporis, hic esse at officia fugit odio reprehenderit quasi mollitia omnis sint nam voluptas sunt ab adipisci saepe. Consectetur ullam quasi ducimus odit voluptatibus accusantium voluptate nihil nobis saepe, enim eos architecto minima voluptatum.</p>
<pre class="line-numbers">
<code class="language-cpp">
#include<iostream>
int i=0, j=0;
sum(int a, int b){
i=a;
j=b;
return i+j;
}
int main(){
int a, b;
std::cout"Sum of a and b is"+sum(a, b)
return 0;
}
</code>
</pre>
</div>
</div>
</div>
</div>
<div class="col-md-3 pl-5 d-none d-md-inline">
<ul class="list-group shadow bg-white rounded">
<a href="https://www.facebook.com" target="_blank" rel="noopener noreferrer" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="https://www.twitter.com" target="_blank" rel="noopener noreferrer" class="list-group-item list-group-item-action">Morbi leo risus</a>
<a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</ul>
</div>
</div><!--/row-->
</div><!-- /.container -->
</div>
<footer class="mainfooter footer" role="contentinfo">
<div class="footer-middle">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>Lorem ipsum dolor sit</h4>
<ul class="list-unstyled">
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor site</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column2-->
<div class="footer-pad">
<h4>Lorem ipsum dolor sit</h4>
<ul class="list-unstyled">
<li><a href="#">Lorem ipsum dolor sit</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column3-->
<div class="footer-pad">
<h4>Lorem ipsum dolor sit</h4>
<ul class="list-unstyled">
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column4-->
<div class="footer-pad">
<h4>Lorem ipsum dolor sit</h4>
<ul class="list-unstyled">
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li>
<a href="#"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-xs-12">
<!--Footer Bottom-->
<ul class="list-inline">
<li class="text-xs-center">© Copyright 2020 - Lorem ipsum dolor sit.com. All rights reserved.</li>
<li class="pull-right"><a href="https://twitter.com/Lorem ipsum dolor sit" target="_blank" rel="noopener noreferrer" style=>twitter</a></li>
<li class="pull-right"><a href="https://www.linkedin.com/company/Lorem ipsum dolor sit" target="_blank" rel="noopener noreferrer" style=>Linkedin</a></li>
<li class="pull-right"><a href="https://www.facebook.com/Lorem ipsum dolor sit" target="_blank" rel="noopener noreferrer" style=>facebook</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$('[data-toggle=offcanvas]').click(function () {
if ($('.sidebar-offcanvas').css('background-color') == 'rgb(255, 255, 255)') {
$('.list-group-item').attr('tabindex', '-1');
} else {
$('.list-group-item').attr('tabindex', '');
}
$('.row-offcanvas').toggleClass('active');
});
});
</script>
</body>
</html>