右侧边栏

Question

所以我一直在参考一个不错的侧边栏的开源代码，并决定学习修改它。 我是初学者，认为这是提出疑问的最佳场所。

所以我的主要问题如下：

1. 加载页面后边栏将立即打开（我不知道如何关闭它）
2. 我想将它完全向右移动，我该怎么做（我尽量不使用框架，但如果没有其他选择，请不要介意）

代码在这里https://codepen.io/nkrao03/pen/BaKYZdr

 $(document).ready(function() { $('#sidebarCollapse').on('click', function() { $('#sidebar').toggleClass('active'); }); });

 @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"; body { font-family: 'Poppins', sans-serif; background: #fafafa } p { font-family: 'Poppins', sans-serif; font-size: 1.1em; font-weight: 300; line-height: 1.7em; color: #999; } a, a:hover, a:focus { color: inherit; text-decoration: none; transition: all 0.3s; } .navbar { padding: 15px 10px; background: #fff; border: none; border-radius: 0; margin-bottom: 40px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); } .navbar-btn { box-shadow: none; outline: none!important; border: none; } .line { width: 100%; height: 1px; border-bottom: 1px dashed #ddd; } .wrapper { display: flex; width: 100%; align-items: stretch; } #sidebar { min-width: 250px; max-width: 250px; background: #7386D5; color: #fff; transition: all 0.3s; } #sidebar.active { margin-left: -250px; } #sidebar .sidebar-header { padding: 20px; background: #6d7fcc; } #sidebar ul.components { padding: 20px 0px; border-bottom: 1px solid #47748b; } #sidebar ul p { padding: 10px; font-size: 1.1em; display: block; } #sidebar ul li a { padding: 10px; font-size: 1.1em; display: block; } #sidebar ul li a:hover { color: #7386D5; background: #fff; } #sidebar ul li.active>a, a[aria-expanded="true"] { color: #fff; background: #6d7fcc; } a[data-toggle="collapse"] { position: relative; } .dropdown-toggle::after { display: block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); } ul ul a { font-size: 0.9em !important; padding-left: 30px !important; background: #6d7fcc; } ul.CTAs { padding: 20px; } ul.CTAs a { text-align: center; font-size: 0.9em !important; display: block; border-radius: 5px; margin-bottom: 5px; } a.download { background: #fff; color: #7386D5; } a.article, a.article:hover { background: #6d7fcc !important; color: #fff !important; } #content { width: 100%; padding: 20px; min-height: 100vh; transition: all 0.3s; } @media(max-width:768px) { #sidebar { margin-left: -250px; } #sidebar.active { margin-left: 0px; } #sidebarCollapse span { display: none; } }

 <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> <title>bootstrap 4 sidebar</title> </head> <body> <div class="wrapper"> <nav id="sidebar"> <div class="sidebar-header"> <h3>SIDEBAR</h3> </div> <ul class="list-unstyled components"> <p>Dummy Heading</p> <li class="active"> <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a> <ul class="collapse list-unstyled" id="homeSubmenu"> <li> <a href="#">home1</a> </li> <li> <a href="#">home2</a> </li> <li> <a href="#">home3</a> </li> </ul> </li> <li> <a href="#">About</a> </li> <li> <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Page</a> <ul class="collapse list-unstyled" id="pageSubmenu"> <li> <a href="#">page1</a> </li> <li> <a href="#">page2</a> </li> <li> <a href="#">page3</a> </li> </ul> </li> <li> <a href="#">Services</a> </li> <li> <a href="#">Contact Us</a> </li> </ul> <ul class="list-unstyled CTAs"> <li> <a href="#" class="download"></a> </li> <li> <a href="#" class="article"></a> </li> </ul> </nav> <div class="content"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <button type="button" id="sidebarCollapse" class="btn btn-info"> <i class="fa fa-align-justify"></i> <span></span> </button> <!--<a class="navbar-brand" href="#">Navbar</a> --> </nav> <h2>Collapsible Sidebar</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="line"></div> <h2>Collapsible Sidebar</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="line"></div> <h2>Collapsible Sidebar</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="line"></div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> </html>

任何建议/帮助将不胜感激。 这对你们来说可能是一个基本问题，但请耐心等待。 谢谢！

Answer 1

我做了一些更改，将侧边栏放在右侧并使其最初缩回。

我将 Html 中的<nav> div 移动到将侧边栏向右移动的content之后。 然后我交换了 css #sidebar和#sidebar.active正负边距。 我相信这是想要的结果。

编辑：将侧边栏触发器移到右侧。

 @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"; body { font-family: 'Poppins', sans-serif; background: #fafafa } p { font-family: 'Poppins', sans-serif; font-size: 1.1em; font-weight: 300; line-height: 1.7em; color: #999; } a, a:hover, a:focus { color: inherit; text-decoration: none; transition: all 0.3s; } .navbar { padding: 15px 10px; background: #fff; border: none; border-radius: 0; margin-bottom: 40px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); } .navbar-btn { box-shadow: none; outline: none!important; border: none; } .line { width: 100%; height: 1px; border-bottom: 1px dashed #ddd; } .wrapper { display: flex; align-items: stretch; width: 100%; overflow-x: hidden; /*perspective: 1500px; */ } #sidebar { min-width: 250px; max-width: 250px; background: #7386D5; color: #fff; margin-right: 0px; transition: all 0.3s; } #sidebar.active { margin-right: 0px; } #sidebar .sidebar-header { padding: 20px; background: #6d7fcc; } #sidebar ul.components { padding: 20px 0px; border-bottom: 1px solid #47748b; } #sidebar ul p { padding: 10px; font-size: 1.1em; display: block; } #sidebar ul li a { padding: 10px; font-size: 1.1em; display: block; } #sidebar ul li a:hover { color: #7386D5; background: #fff; } #sidebar ul li.active>a, a[aria-expanded="true"] { color: #fff; background: #6d7fcc; } a[data-toggle="collapse"] { position: relative; } .dropdown-toggle::after { display: block; position: absolute; top: 50%; left: 20px; transform: translateY(50%); } ul ul a { font-size: 0.9em !important; padding-left: 30px !important; background: #6d7fcc; } ul.CTAs { padding: 20px; } ul.CTAs a { text-align: center; font-size: 0.9em !important; display: block; border-radius: 5px; margin-bottom: 5px; } a.download { background: #fff; color: #7386D5; } a.article, a.article:hover { background: #6d7fcc !important; color: #fff !important; } #content { width: 100%; padding: 20px; min-height: 100vh; transition: all 0.3s; } #sidebarCollapse { display: none; position: absolute; right: 1rem; top: 1.5rem; } @media(max-width:768px) { #sidebar { margin-right: -250px; } #sidebar.active { margin-right: 0px; } #sidebarCollapse { display: block; } }

 <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> <title>bootstrap 4 sidebar</title> </head> <body> <div class="wrapper"> <div class="content"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <button type="button" id="sidebarCollapse" class="btn btn-info"> <i class="fa fa-align-justify"></i> <span></span> </button> <!--<a class="navbar-brand" href="#">Navbar</a> --> </nav> <h2>Collapsible Sidebar</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="line"></div> <h2>Collapsible Sidebar</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="line"></div> <h2>Collapsible Sidebar</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="line"></div> </div> <nav id="sidebar"> <div class="sidebar-header"> <h3>SIDEBAR</h3> </div> <ul class="list-unstyled components"> <p>Dummy Heading</p> <li class="active"> <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a> <ul class="collapse list-unstyled" id="homeSubmenu"> <li> <a href="#">home1</a> </li> <li> <a href="#">home2</a> </li> <li> <a href="#">home3</a> </li> </ul> </li> <li> <a href="#">About</a> </li> <li> <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Page</a> <ul class="collapse list-unstyled" id="pageSubmenu"> <li> <a href="#">page1</a> </li> <li> <a href="#">page2</a> </li> <li> <a href="#">page3</a> </li> </ul> </li> <li> <a href="#">Services</a> </li> <li> <a href="#">Contact Us</a> </li> </ul> <ul class="list-unstyled CTAs"> <li> <a href="#" class="download"></a> </li> <li> <a href="#" class="article"></a> </li> </ul> </nav> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <script> $(document).ready(function() { $('#sidebarCollapse').on('click', function() { $('#sidebar').toggleClass('active'); }); }); </script> </body> </html>

这是另一个版本，当高于 768px 视口宽度时显示侧边栏，这是侧边栏的标准：

 @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"; body { font-family: 'Poppins', sans-serif; background: #fafafa } p { font-family: 'Poppins', sans-serif; font-size: 1.1em; font-weight: 300; line-height: 1.7em; color: #999; } a, a:hover, a:focus { color: inherit; text-decoration: none; transition: all 0.3s; } .navbar { padding: 15px 10px; background: #fff; border: none; border-radius: 0; margin-bottom: 40px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); } .navbar-btn { box-shadow: none; outline: none!important; border: none; } .line { width: 100%; height: 1px; border-bottom: 1px dashed #ddd; } .wrapper { display: flex; align-items: stretch; width: 100%; overflow-x: hidden; /*perspective: 1500px; */ } #sidebar { min-width: 250px; max-width: 250px; background: #7386D5; color: #fff; margin-right: 0px; transition: all 0.3s; } #sidebar.active { margin-right: 0px; } #sidebar .sidebar-header { padding: 20px; background: #6d7fcc; } #sidebar ul.components { padding: 20px 0px; border-bottom: 1px solid #47748b; } #sidebar ul p { padding: 10px; font-size: 1.1em; display: block; } #sidebar ul li a { padding: 10px; font-size: 1.1em; display: block; } #sidebar ul li a:hover { color: #7386D5; background: #fff; } #sidebar ul li.active>a, a[aria-expanded="true"] { color: #fff; background: #6d7fcc; } a[data-toggle="collapse"] { position: relative; } .dropdown-toggle::after { display: block; position: absolute; top: 50%; left: 20px; transform: translateY(50%); } ul ul a { font-size: 0.9em !important; padding-left: 30px !important; background: #6d7fcc; } ul.CTAs { padding: 20px; } ul.CTAs a { text-align: center; font-size: 0.9em !important; display: block; border-radius: 5px; margin-bottom: 5px; } a.download { background: #fff; color: #7386D5; } a.article, a.article:hover { background: #6d7fcc !important; color: #fff !important; } #content { width: 100%; padding: 20px; min-height: 100vh; transition: all 0.3s; } #sidebarCollapse { display: none; position: absolute; right: 1rem; top: 1.5rem; } @media(max-width:768px) { #sidebar { margin-right: -250px; } #sidebar.active { margin-right: 0px; } #sidebarCollapse { display: block; } }

 <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> <title>bootstrap 4 sidebar</title> </head> <body> <div class="wrapper"> <div class="content"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <button type="button" id="sidebarCollapse" class="btn btn-info"> <i class="fa fa-align-justify"></i> <span></span> </button> <!--<a class="navbar-brand" href="#">Navbar</a> --> </nav> <h2>Collapsible Sidebar</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="line"></div> <h2>Collapsible Sidebar</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="line"></div> <h2>Collapsible Sidebar</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="line"></div> </div> <nav id="sidebar"> <div class="sidebar-header"> <h3>SIDEBAR</h3> </div> <ul class="list-unstyled components"> <p>Dummy Heading</p> <li class="active"> <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a> <ul class="collapse list-unstyled" id="homeSubmenu"> <li> <a href="#">home1</a> </li> <li> <a href="#">home2</a> </li> <li> <a href="#">home3</a> </li> </ul> </li> <li> <a href="#">About</a> </li> <li> <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Page</a> <ul class="collapse list-unstyled" id="pageSubmenu"> <li> <a href="#">page1</a> </li> <li> <a href="#">page2</a> </li> <li> <a href="#">page3</a> </li> </ul> </li> <li> <a href="#">Services</a> </li> <li> <a href="#">Contact Us</a> </li> </ul> <ul class="list-unstyled CTAs"> <li> <a href="#" class="download"></a> </li> <li> <a href="#" class="article"></a> </li> </ul> </nav> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <script> $(document).ready(function() { $('#sidebarCollapse').on('click', function() { $('#sidebar').toggleClass('active'); }); }); </script> </body> </html>

Answer 2

1. 将#sidebar 移动到内容之后，将侧边栏向右移动。 或者在 flex 中使用 order 属性。

2. 为#sidebar 添加 display:none 到 css 以防止它在第一次进入页面时显示

3. 你需要修改点击事件

 $(document).ready(function() { $('body').on('click', function() { $('#sidebar').show(); }); });

 @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"; body { font-family: 'Poppins', sans-serif; background: #fafafa } p { font-family: 'Poppins', sans-serif; font-size: 1.1em; font-weight: 300; line-height: 1.7em; color: #999; } a, a:hover, a:focus { color: inherit; text-decoration: none; transition: all 0.3s; } .navbar { padding: 15px 10px; background: #fff; border: none; border-radius: 0; margin-bottom: 40px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); } .navbar-btn { box-shadow: none; outline: none!important; border: none; } .line { width: 100%; height: 1px; border-bottom: 1px dashed #ddd; } .wrapper { display: flex; width: 100%; align-items: stretch; } #sidebar { min-width: 250px; max-width: 250px; background: #7386D5; color: #fff; transition: all 0.3s; display:none; } #sidebar.active { margin-left: -250px; } #sidebar .sidebar-header { padding: 20px; background: #6d7fcc; } #sidebar ul.components { padding: 20px 0px; border-bottom: 1px solid #47748b; } #sidebar ul p { padding: 10px; font-size: 1.1em; display: block; } #sidebar ul li a { padding: 10px; font-size: 1.1em; display: block; } #sidebar ul li a:hover { color: #7386D5; background: #fff; } #sidebar ul li.active>a, a[aria-expanded="true"] { color: #fff; background: #6d7fcc; } a[data-toggle="collapse"] { position: relative; } .dropdown-toggle::after { display: block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); } ul ul a { font-size: 0.9em !important; padding-left: 30px !important; background: #6d7fcc; } ul.CTAs { padding: 20px; } ul.CTAs a { text-align: center; font-size: 0.9em !important; display: block; border-radius: 5px; margin-bottom: 5px; } a.download { background: #fff; color: #7386D5; } a.article, a.article:hover { background: #6d7fcc !important; color: #fff !important; } #content { width: 100%; padding: 20px; min-height: 100vh; transition: all 0.3s; } @media(max-width:768px) { #sidebar { margin-left: -250px; } #sidebar.active { margin-left: 0px; } #sidebarCollapse span { display: none; } }

 <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> <title>bootstrap 4 sidebar</title> </head> <body> <div class="wrapper"> <div class="content"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <button type="button" id="sidebarCollapse" class="btn btn-info"> <i class="fa fa-align-justify"></i> <span></span> </button> <!--<a class="navbar-brand" href="#">Navbar</a> --> </nav> <h2>Collapsible Sidebar</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="line"></div> <h2>Collapsible Sidebar</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="line"></div> <h2>Collapsible Sidebar</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="line"></div> </div> <nav id="sidebar"> <div class="sidebar-header"> <h3>SIDEBAR</h3> </div> <ul class="list-unstyled components"> <p>Dummy Heading</p> <li class="active"> <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a> <ul class="collapse list-unstyled" id="homeSubmenu"> <li> <a href="#">home1</a> </li> <li> <a href="#">home2</a> </li> <li> <a href="#">home3</a> </li> </ul> </li> <li> <a href="#">About</a> </li> <li> <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Page</a> <ul class="collapse list-unstyled" id="pageSubmenu"> <li> <a href="#">page1</a> </li> <li> <a href="#">page2</a> </li> <li> <a href="#">page3</a> </li> </ul> </li> <li> <a href="#">Services</a> </li> <li> <a href="#">Contact Us</a> </li> </ul> <ul class="list-unstyled CTAs"> <li> <a href="#" class="download"></a> </li> <li> <a href="#" class="article"></a> </li> </ul> </nav> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> </html>