Fluid Inhalt neben festen Seitenleiste mit variabler Breite

Question

Ich versuche, eine umschaltbare Sidebar (wie im Wechsel zwischen kurzen und langen Form Sidebar) mit Bootstrap, eine Reihe von Beispielen und andere Arbeiten online zu implementieren.

Die Seitenleiste ändert die Breite beim Umschalten und ich möchte, dass der Inhalt neben "long" oder "short" angezeigt wird.

ich für jede Seite einen Abschnitt verwende und würde jeden Abschnitt gerne volle Breite auf dem Bildschirm (wie 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>

Hier ist die jsfiddle des obigen Codes

erscheinen

Ich habe einen Inhaltswrapper ausprobiert und einen Rand für die Inhaltsklasse festgelegt, aber er schiebt den Inhalt immer noch unter die Seitenleiste oder in die Inhaltsleiste.

Answer 1

So ähnlich?

$(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>