Question

使用引导程序，我当前的网站导航存在两个问题。首先，我想在小屏幕和大屏幕上默认关闭边栏。但是，添加“切换”后，它可以在大屏幕上使用，但不能在移动设备上使用。我的第二个问题是，当我使用移动版本时，侧栏（一旦打开）不再固定。因此整个页面变大，您可以从左向右滚动。任何建议将不胜感激。我已经附上了我的HTML和CSS代码。

body {
  overflow-x: hidden;
}

#sidebar-wrapper {
  min-height: 100vh;
  margin-left: -15rem;
  -webkit-transition: margin .25s ease-out;
  -moz-transition: margin .25s ease-out;
  -o-transition: margin .25s ease-out;
  transition: margin .25s ease-out;
}

#sidebar-wrapper .sidebar-heading {
  padding: 0.875rem 1.25rem;
  font-size: 1.2rem;
}

#sidebar-wrapper .list-group {
  width: 15rem;
}

#page-content-wrapper {
  min-width: 100vw;
}

#wrapper.toggled #sidebar-wrapper {
  margin-left: 0;
}

@media (min-width: 768px) {
  #sidebar-wrapper {
    margin-left: 0;
  }

  #page-content-wrapper {
    min-width: 0;
    width: 100%;
  }

  #wrapper.toggled #sidebar-wrapper {
    margin-left: -15rem;
  }
}

<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, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Name</title>

  <!-- Bootstrap core CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="css/simple-sidebar.css" rel="stylesheet">
  
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" integrity="sha384-KA6wR/X5RY4zFAHpv/CnoG2UW1uogYfdnP67Uv7eULvTveboZJg0qUpmJZb5VqzN" crossorigin="anonymous">

</head>

<body>

  <div class="d-flex toggled" id="wrapper">

    <!-- Sidebar -->
    <div class="bg-light" id="sidebar-wrapper">
      <div class="sidebar-heading">Logo</div>
      <div class="list-group list-group-flush">
        <a href="#" class="list-group-item list-group-item-action bg-light">The Economic Machine</a>
        <a href="#" class="list-group-item list-group-item-action bg-light">Finance and Economics</a>
        <a href="#" class="list-group-item list-group-item-action bg-light">Politics and Economics</a>
        <a href="#" class="list-group-item list-group-item-action bg-light">IR</a>
        <a href="#" class="list-group-item list-group-item-action bg-light">Profile</a>
        <a href="#" class="list-group-item list-group-item-action bg-light">About</a>
      </div>
    </div>
    <!-- /#sidebar-wrapper -->

    
    <!-- Page Content -->
    <div id="page-content-wrapper">
		<nav class="navbar navbar-expand navbar-dark bg-primary">
   
    	<button class="btn btn-primary" id="menu-toggle"><i class="fas fa-bars"></i></button>
    
       		<div class="navbar-collapse collapse">
        		<ul class="nav navbar-nav ml-auto">
           			<li class="active">
            		<a class="nav-link" href="#"><i class="fas fa-home"></i><span class="clearfix d-none d-sm-inline-block">&nbsp;Home</span></a>
            		</li>
            		<li class="nav-item">
                	<a class="nav-link" href="register.html"><i class="fas fa-user-plus"></i><span class="clearfix d-none d-sm-inline-block">&nbsp;Sign up</span></a>
            		</li>
            		<li class="nav-item">
                	<a class="nav-link" href="login.html"><i class="fas fa-sign-in-alt"></i><span class="clearfix d-none d-sm-inline-block">&nbsp;Login</span></a>
					</li>
        		</ul>
    		</div>
		</nav>

      <div class="container-fluid">
        <h1 class="mt-4">Welcome!</h1>
        <p>The website will soon be available.</p>
      </div>
    </div>
  </div>
<!-- Footer -->
  <footer id="sticky-footer" class="py-2 bg-dark text-white-50">
    <div class="container text-center">
      <small> &copy; 2019</small>
    </div>
  </footer>
<!-- Footer --> 
  
  
  
  <!-- Bootstrap core JavaScript -->
  <script src="js/jquery.js"></script>
  <script src="js/bootstrap.bundle.js"></script>

  <!-- Menu Toggle Script -->
    <script>
    $("#menu-toggle").click(function(e) {
      e.preventDefault();
      $("#wrapper").toggleClass("toggled");
    });
  </script>

</body>

</html>

如何修复和切换引导侧栏

0 个答案: