可变宽度的固定边栏旁边的流体内容

时间：2022-11-29 22:57:51

I'm trying to implement a switchable sidebar (as in toggle between short and long form sidebar) using bootstrap, a bunch of examples and other works online.

我正在尝试使用bootstrap实现一个可切换的边栏(如在短边栏和长边栏之间切换)、一些示例和其他在线工作。

The sidebar changes width when toggled and I want the content to appear next to it despite it being "long" or "short".

边栏在切换时改变宽度，我希望内容显示在旁边，尽管它是“长”或“短”。

I am using a section per each page and would like each section to appear full width on screen (like so)

我在每一页都使用一个部分，并希望每个部分在屏幕上显示全宽度(像这样)

$(document).ready(function() {
  $("#sidebarCollapse").click(function() {
    $("#sidebar").toggleClass("active");
    $(this).toggleClass('active');
  });
});
$("#aboutbutton").click(function() {
  $('html, body').animate({
    scrollTop: $("#aboutDiv").offset().top
  }, 2000);
});
body {
  font-family: 'Poppins', sans-serif;
  background: #fafafa;
}

p {
  font-family: 'Poppins', sans-serif;
  font-size: 0.1em;
  font-weight: 300;
  line-height: 1.7em;
  color: #3498db;
}

a,
a:hover,
a:focus {
  color: inherit!important;
  text-decoration: none!important;
  transition: all 0.3s;
}

.wrapper {
  display: flex;
}

#sidebar {
  min-width: 250px;
  max-width: 250px;
  background: #2980b9;
  color: #ecf0f1;
  transition: all 0.3s;
  height: 100%;
  min-height: 100vh;
  position: fixed;
}

#sidebar.active {
  min-width: 80px;
  max-width: 80px;
  text-align: center;
}

#sidebar ul.components {
  padding: 20px 0;
}

#sidebar ul p {
  color: #fff;
  padding: 10px;
}

#sidebar ul li a {
  padding: 10px;
  font-size: 1.6em;
  display: block;
  text-align: left;
}

#sidebar ul li a:hover {
  color: #ecf0f1;
  background: #3498db;
}

#sidebar .active ul li a {
  padding: 20px 10px;
  text-align: center;
  font-size: 0.85em;
}

#sidebar .active i {
  font-size: 1em;
}

#sidebar .active ul li a i {
  margin-right: 0;
  display: block;
  font-size: 1.8em;
  margin-bottom: 5px;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
  color: #ecf0f1;
  background: #3498db;
}

ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;
  background: #ecf0f1;
}

#sidebarCollapse {
  width: 100%;
  height: 80%;
  background: #2980b9;
  padding: 20px 0;
  font-size: 1.6em;
  display: block;
  border: 0;
}

#sidebarCollapse-wrapper {
  padding-top: 5%;
  padding-bottom: 5%;
}

#sidebarCollapse span {
  width: 30%;
  height: 2px;
  margin: 0 auto;
  display: block;
  background: #fff;
  transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
}

#sidebarCollapse span:first-of-type {
  /* rotate first one */
  transform: rotate(45deg) translate(2px, 2px);
}

#sidebarCollapse span:nth-of-type(2) {
  /* second one is not visible */
  opacity: 0;
}

#sidebarCollapse span:last-of-type {
  /* rotate third one */
  transform: rotate(-45deg) translate(1px, -1px);
}

#sidebarCollapse.active span {
  /* no rotation */
  transform: none;
  /* all bars are visible */
  opacity: 1;
  margin: 5px auto;
}

section {
  min-height: 100vh;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
}
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.1/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/js/mdb.min.js"></script>




<!DOCTYPE html>
<html lang="en">

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>José Gomes - Website</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <!-- Material Design Bootstrap -->
  <link rel="stylesheet" href="css/mdb.min.css">
  <!-- Scrollbar Custom CSS -->
  <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css">
  <!-- Our Custom CSS -->
  <link rel="stylesheet" href="css/custom.css">

  <!-- in your header -->
  <link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
</head>

<body>

  <!-- Content will go here -->
  <div class="wrapper">
    <!-- Sidebar -->
    <nav class="sidebar-nav" data-spy="affix" id="sidebar">
      <!-- Sidebar Header -->
      <div id="sidebarCollapse-wrapper">
        <button type="button" id="sidebarCollapse" class="navbar-btn waves-effect waves-light">
        <span></span>
        <span></span>
        <span></span>
      </button>
      </div>
      <!-- Sidebar Links -->
      <ul class="list-unstyled components">
        <li class="active waves-effect waves-light" id="aboutbutton"><a href="#"><i class="fa fa-user-circle" aria-hidden="true"></i>  Home</a></li>
        <li class="waves-effect waves-light"><a href="#"><i class="fa fa-briefcase" aria-hidden="true"></i> Page1
          </a></li>
        <li class="waves-effect waves-light"><a href="#"><i class="fa fa-cogs" aria-hidden="true"></i>   Page2</a></li>
        <li class="waves-effect waves-light"><a href="#"><i class="fa fa-home" aria-hidden="true"></i>   Page3</a></li>
      </ul>
    </nav>
  </div>


  <!-- Page Content -->
  <div id="content container-fluid p-0">


    <div class="d-flex flex-column">
      <section class="p-3 p-lg-5 content-page" id="Section1">
        Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST -
      </section>
      <section class="p-3 content-page">
        Section 2 TEST - Section 2 TEST - Section 2 TEST - Section 2 TEST - Section 2 TEST -
      </section>
      <section class="p-3 content-page">
        Section 3 TEST - Section 3 TEST - Section 3 TEST - Section 3 TEST</section>
    </div>

  </div>

  </div>

Here's the jsfiddle of the above code

这是上述代码的jsfiddle。

I've tried a content wrapper and setting a margin for the content class but it still pushes the content down below the sidebar or inside it.

我尝试了一个内容包装器，并为content类设置了一个裕度，但它仍然将内容推到工具条下面或内部。

1 个解决方案

#1

1  

Something like this ?

是这样的吗?

$(document).ready(function() {
  $("#sidebarCollapse").click(function() {
    $("#sidebar").toggleClass("active");
    $(this).toggleClass('active');
  });
});
$("#aboutbutton").click(function() {
  $('html, body').animate({
    scrollTop: $("#aboutDiv").offset().top
  }, 2000);
});
body {
  font-family: 'Poppins', sans-serif;
  background: #fafafa;
}

p {
  font-family: 'Poppins', sans-serif;
  font-size: 0.1em;
  font-weight: 300;
  line-height: 1.7em;
  color: #3498db;
}

a,
a:hover,
a:focus {
  color: inherit!important;
  text-decoration: none!important;
  transition: all 0.3s;
}

.wrapper {
  display: flex;
}

#sidebar {
  min-width: 250px;
  max-width: 250px;
  background: #2980b9;
  color: #ecf0f1;
  transition: all 0.3s;
  height: 100%;
  min-height: 100vh;
  position: fixed;
}

#sidebar.active {
  min-width: 80px;
  max-width: 80px;
  text-align: center;
}

#sidebar ul.components {
  padding: 20px 0;
}

#sidebar ul p {
  color: #fff;
  padding: 10px;
}

#sidebar ul li a {
  padding: 10px;
  font-size: 1.6em;
  display: block;
  text-align: left;
}

#sidebar ul li a:hover {
  color: #ecf0f1;
  background: #3498db;
}

#sidebar .active ul li a {
  padding: 20px 10px;
  text-align: center;
  font-size: 0.85em;
}

#sidebar .active i {
  font-size: 1em;
}

#sidebar .active ul li a i {
  margin-right: 0;
  display: block;
  font-size: 1.8em;
  margin-bottom: 5px;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
  color: #ecf0f1;
  background: #3498db;
}

ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;
  background: #ecf0f1;
}

#sidebarCollapse {
  width: 100%;
  height: 80%;
  background: #2980b9;
  padding: 20px 0;
  font-size: 1.6em;
  display: block;
  border: 0;
}

#sidebarCollapse-wrapper {
  padding-top: 5%;
  padding-bottom: 5%;
}

#sidebarCollapse span {
  width: 30%;
  height: 2px;
  margin: 0 auto;
  display: block;
  background: #fff;
  transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
}

#sidebarCollapse span:first-of-type {
  /* rotate first one */
  transform: rotate(45deg) translate(2px, 2px);
}

#sidebarCollapse span:nth-of-type(2) {
  /* second one is not visible */
  opacity: 0;
}

#sidebarCollapse span:last-of-type {
  /* rotate third one */
  transform: rotate(-45deg) translate(1px, -1px);
}

#sidebarCollapse.active span {
  /* no rotation */
  transform: none;
  /* all bars are visible */
  opacity: 1;
  margin: 5px auto;
}

.sidebar-nav.active + div#content{
margin-left:80px;
}
.sidebar-nav:not(.active) + div#content{
margin-left:250px;
}


section {
  min-height: 100vh;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
}
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.1/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/js/mdb.min.js"></script>




<!DOCTYPE html>
<html lang="en">

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>José Gomes - Website</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <!-- Material Design Bootstrap -->
  <link rel="stylesheet" href="css/mdb.min.css">
  <!-- Scrollbar Custom CSS -->
  <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css">
  <!-- Our Custom CSS -->
  <link rel="stylesheet" href="css/custom.css">

  <!-- in your header -->
  <link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
</head>

<body>

  <!-- Content will go here -->
    <!-- Sidebar -->
    <nav class="sidebar-nav" data-spy="affix" id="sidebar">
      <!-- Sidebar Header -->
      <div id="sidebarCollapse-wrapper">
        <button type="button" id="sidebarCollapse" class="navbar-btn waves-effect waves-light">
        <span></span>
        <span></span>
        <span></span>
      </button>
      </div>
      <!-- Sidebar Links -->
      <ul class="list-unstyled components">
        <li class="active waves-effect waves-light" id="aboutbutton"><a href="#"><i class="fa fa-user-circle" aria-hidden="true"></i>  Home</a></li>
        <li class="waves-effect waves-light"><a href="#"><i class="fa fa-briefcase" aria-hidden="true"></i> Page1
          </a></li>
        <li class="waves-effect waves-light"><a href="#"><i class="fa fa-cogs" aria-hidden="true"></i>   Page2</a></li>
        <li class="waves-effect waves-light"><a href="#"><i class="fa fa-home" aria-hidden="true"></i>   Page3</a></li>
      </ul>
    </nav>


  <!-- Page Content -->
  <div id="content" class="p-0">


    <div class="d-flex flex-column">
      <section class="p-3 p-lg-5 content-page" id="Section1">
        Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST -
      </section>
      <section class="p-3 content-page">
        Section 2 TEST - Section 2 TEST - Section 2 TEST - Section 2 TEST - Section 2 TEST -
      </section>
      <section class="p-3 content-page">
        Section 3 TEST - Section 3 TEST - Section 3 TEST - Section 3 TEST</section>
    </div>

  </div>

  </div>

#1

1  

Something like this ?

是这样的吗?

$(document).ready(function() {
  $("#sidebarCollapse").click(function() {
    $("#sidebar").toggleClass("active");
    $(this).toggleClass('active');
  });
});
$("#aboutbutton").click(function() {
  $('html, body').animate({
    scrollTop: $("#aboutDiv").offset().top
  }, 2000);
});
body {
  font-family: 'Poppins', sans-serif;
  background: #fafafa;
}

p {
  font-family: 'Poppins', sans-serif;
  font-size: 0.1em;
  font-weight: 300;
  line-height: 1.7em;
  color: #3498db;
}

a,
a:hover,
a:focus {
  color: inherit!important;
  text-decoration: none!important;
  transition: all 0.3s;
}

.wrapper {
  display: flex;
}

#sidebar {
  min-width: 250px;
  max-width: 250px;
  background: #2980b9;
  color: #ecf0f1;
  transition: all 0.3s;
  height: 100%;
  min-height: 100vh;
  position: fixed;
}

#sidebar.active {
  min-width: 80px;
  max-width: 80px;
  text-align: center;
}

#sidebar ul.components {
  padding: 20px 0;
}

#sidebar ul p {
  color: #fff;
  padding: 10px;
}

#sidebar ul li a {
  padding: 10px;
  font-size: 1.6em;
  display: block;
  text-align: left;
}

#sidebar ul li a:hover {
  color: #ecf0f1;
  background: #3498db;
}

#sidebar .active ul li a {
  padding: 20px 10px;
  text-align: center;
  font-size: 0.85em;
}

#sidebar .active i {
  font-size: 1em;
}

#sidebar .active ul li a i {
  margin-right: 0;
  display: block;
  font-size: 1.8em;
  margin-bottom: 5px;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
  color: #ecf0f1;
  background: #3498db;
}

ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;
  background: #ecf0f1;
}

#sidebarCollapse {
  width: 100%;
  height: 80%;
  background: #2980b9;
  padding: 20px 0;
  font-size: 1.6em;
  display: block;
  border: 0;
}

#sidebarCollapse-wrapper {
  padding-top: 5%;
  padding-bottom: 5%;
}

#sidebarCollapse span {
  width: 30%;
  height: 2px;
  margin: 0 auto;
  display: block;
  background: #fff;
  transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
}

#sidebarCollapse span:first-of-type {
  /* rotate first one */
  transform: rotate(45deg) translate(2px, 2px);
}

#sidebarCollapse span:nth-of-type(2) {
  /* second one is not visible */
  opacity: 0;
}

#sidebarCollapse span:last-of-type {
  /* rotate third one */
  transform: rotate(-45deg) translate(1px, -1px);
}

#sidebarCollapse.active span {
  /* no rotation */
  transform: none;
  /* all bars are visible */
  opacity: 1;
  margin: 5px auto;
}

.sidebar-nav.active + div#content{
margin-left:80px;
}
.sidebar-nav:not(.active) + div#content{
margin-left:250px;
}


section {
  min-height: 100vh;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
}
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.1/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/js/mdb.min.js"></script>




<!DOCTYPE html>
<html lang="en">

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>José Gomes - Website</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <!-- Material Design Bootstrap -->
  <link rel="stylesheet" href="css/mdb.min.css">
  <!-- Scrollbar Custom CSS -->
  <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css">
  <!-- Our Custom CSS -->
  <link rel="stylesheet" href="css/custom.css">

  <!-- in your header -->
  <link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
</head>

<body>

  <!-- Content will go here -->
    <!-- Sidebar -->
    <nav class="sidebar-nav" data-spy="affix" id="sidebar">
      <!-- Sidebar Header -->
      <div id="sidebarCollapse-wrapper">
        <button type="button" id="sidebarCollapse" class="navbar-btn waves-effect waves-light">
        <span></span>
        <span></span>
        <span></span>
      </button>
      </div>
      <!-- Sidebar Links -->
      <ul class="list-unstyled components">
        <li class="active waves-effect waves-light" id="aboutbutton"><a href="#"><i class="fa fa-user-circle" aria-hidden="true"></i>  Home</a></li>
        <li class="waves-effect waves-light"><a href="#"><i class="fa fa-briefcase" aria-hidden="true"></i> Page1
          </a></li>
        <li class="waves-effect waves-light"><a href="#"><i class="fa fa-cogs" aria-hidden="true"></i>   Page2</a></li>
        <li class="waves-effect waves-light"><a href="#"><i class="fa fa-home" aria-hidden="true"></i>   Page3</a></li>
      </ul>
    </nav>


  <!-- Page Content -->
  <div id="content" class="p-0">


    <div class="d-flex flex-column">
      <section class="p-3 p-lg-5 content-page" id="Section1">
        Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST -
      </section>
      <section class="p-3 content-page">
        Section 2 TEST - Section 2 TEST - Section 2 TEST - Section 2 TEST - Section 2 TEST -
      </section>
      <section class="p-3 content-page">
        Section 3 TEST - Section 3 TEST - Section 3 TEST - Section 3 TEST</section>
    </div>

  </div>

  </div>

标签：

相关文章