堆棧內存溢出
  簡體   English   中英

右側邊欄

[英]Sidebar to the Right Side

 原文  2020-09-08 13:33:37  6   2    html/ css

問題描述

所以我一直在參考一個不錯的側邊欄的開源代碼，並決定學習修改它。 我是初學者，認為這是提出疑問的最佳場所。

所以我的主要問題如下：

  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>

任何建議/幫助將不勝感激。 這對你們來說可能是一個基本問題，但請耐心等待。 謝謝！

2 個解決方案

解決方案1
 1 已采納  2020-09-08 14:28:32

我做了一些更改，將側邊欄放在右側並使其最初縮回。

我將 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>

解決方案2
 1  2020-09-08 15:14:35

  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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Bootstrap 側邊欄在右側展開 邊欄導航和右側顯示內容 從右側插入左側的側邊欄導航 HTML側欄顯示在底部而不是右側 如何移動右側的側邊欄？ 把它推到更右邊？ HTML / CSS：側邊欄顯示在頁面底部而不是右側 我的側邊欄無法顯示在右側 從右到左顯示woocommerce小部件側邊欄 如何在右側顯示此SVG“側邊欄菜單”？ 如何使側邊欄菜單固定但浮動在右側
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM