我对代码集Bootply Side Navigation进行了更改，它是为引导3.4.1所做的。我从codeply边栏示例中对模板进行了一些更改，并添加了阴影列表组和阴影卡，但是在 Bootstrap 4.4.1
中无法正常工作任何帮助将不胜感激。我想以切换格式（很明显）看到左侧边栏。
我想要一个适用于移动设备的工具条
body {
padding-top: 50px;
}
/*
* Style tweaks
* --------------------------------------------------
*/
html,
body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
height: 100%;
}
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 */
}
}<!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/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>
<body>
<div class="row">
<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">Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">Lorem ipsum dolor sit amet consectetur</a>
<a href="#" class="list-group-item list-group-item-action">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="fas fa-bars"></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;
</code>
</pre>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<ul class="list-group bg-white">
<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>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" 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>