Bootstrap 4 mit reduzierbaren Seitenleiste

Question

Ich möchte eine zusammenklappbare Sidebar erstellen, die der Benutzer wechseln kann. Nach viel Spiel habe ich es geschafft, aber right now, it is very ugly. Hier ist der Code:

<div class="container-fluid"> 
    <div class="row"> 
    <nav class="col-md-3 collapse show" id="sidebar"> 
     <h2>I'm a sidebar</h2>  
    </nav> 
    <main class="col-md-9"> 
     <i class="fa fa-times" data-toggle="collapse" data-target="#sidebar" aria-hidden="true" aria-expanded="false" aria-controls="sidebar"></i> 
     <h2>I'm the main content</h2> 
    </main> 
    </div> 
</div> 

Das Problem dabei ist, das Kollabieren ist vertikal, und dann einmal Zusammenbruch, der Inhalt nicht volle Breite geht!

Answer 1

Es gibt einen einfachen Weg, Sie müssen nicht jQuery verwenden. Schauen Sie sich dieses Beispiel:

<div class="container-fluid"> 
    <div class="row"> 
    <nav class="col-md-3 collapse show" id="sidebar"> 
     <h2>I'm a sidebar</h2>  
    </nav> 
    <main class="col-md-9"> 
     <i class="fa fa-times" data-toggle="collapse" data-target="sidebar" aria-hidden="true" aria-expanded="false" aria-controls="sidebar" onclick="document.getElementById(this.getAttribute('data-target')).style.display = 'none';"></i> 
     <h2>I'm the main content</h2> 
    </main> 
    </div> 
</div> 

I data-target und hat eine sehr einfache onclick geändert haben.

EDIT:

Weitere Verbesserungen:

<div class="container-fluid"> 
    <div class="row d-flex"> 
    <nav class="col-md-3 collapse show width" id="sidebar"> 
     <h2>I'm a sidebar</h2>  
    </nav> 
    <main class="col-md-9"> 
     <i class="fa fa-times" data-toggle="collapse" data-target="#sidebar" aria-hidden="true" aria-expanded="false" aria-controls="sidebar" onclick="var that = this; setTimeout(function() {console.log(that.parentNode);that.parentNode.style.flex = 'auto';that.parentNode.style['max-width'] = 'none';}, 2000);"></i> 
     <h2>I'm the main content</h2> 
    </main> 
    </div> 
</div>