Side Nav Bar Open/Collapse und Container Resize

Also verwende ich Bootstrap, um ein Dashboard mit einer seitlichen Navigationsleiste zu erstellen. Wenn die Navigationsleiste geöffnet ist, wird der Inhalt des Containers nach rechts und außerhalb des Bildschirms verschoben. Ich möchte, dass der gesamte Container an den Bildschirm angepasst wird. Unabhängig davon, ob die Navigationsleiste geöffnet oder ausgeblendet ist, sollte der Container vollständig sichtbar sein. Gibt es eine Bootstrap CSS-Klasse, die ich Body oder Container hinzufügen kann, um das Problem zu beheben?Side Nav Bar Open/Collapse und Container Resize

<body> 
     <div id="wrapper"> 
     <div class="overlay"></div> 

     <!-- Sidebar --> 
     <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation"> 
      <ul class="nav sidebar-nav"> 
       <li class="sidebar-brand"> 
        <a href="#"><img src="assets/img/logo.png"></img></a> 
       </li> 
       <li> 
        <a href="overview.html"><span class="icon icon-home"></span>Overview</a> 
       </li> 
       <li> 
        <a href="#"> <span class="icon icon-suitcase"></span>Account Management</a> 
       </li> 
       <li> 
        <a href="#"><span class="icon icon-bar-graph"></span>Demand Planning</a> 
       </li> 
       <li> 
        <a href="#"><span class="icon icon-box"></span>Inventory Planning</a> 
       </li> 

       <li> 
        <a href="#"><span class="icon icon-light-bulb"></span>Vendor Management Invetory</a> 
       </li> 
       <li> 
        <a href="dashboards.html"><span class="icon icon-calculator"></span>Dashboards</a> 
       </li> 
       <li> 
        <a href="#"><span class="icon icon-text-document">Reports</a> 
       </li> 
      </ul> 
     </nav> 
     <!-- /#sidebar-wrapper --> 

     <!-- Page Content --> 
     <div id="page-content-wrapper"> 
      <button type="button" class="hamburger is-closed" data-toggle="offcanvas"> 
       <span class="hamb-top"></span> 
       <span class="hamb-middle"></span> 
       <span class="hamb-bottom"></span> 
      </button> 
      <div class="container"> 
       <div class="dashhead"> 
     <div class="dashhead-titles"> 
     <div class="dashhead-toolbar"> 
      <form class="navbar-form" role="search"> 
       <div class="input-group"> 
       <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> 
       </div> 
      </form> 
     </div> 
     <h3 class="dashhead-title">Overview</h3> 
     </div>  
    </div> 
       <ul class="nav nav-bordered mt-4 mt-md-2 mb-0 clearfix" role="tablist"> 
     <li class="nav-item" role="presentation"> 
     <a href="#traffic" class="nav-link active" role="tab" data-toggle="tab" aria-controls="traffic">Summary</a> 
     </li> 
    </ul> 

    <hr class="mt-0 mb-5"> 

    <div class="tab-content"> 
     <div role="tabpanel" class="tab-pane active" id="traffic"> 
     <div class="row text-center m-t-md"> 
      <div class="col-lg-4"</div> 
      </div> 
      </div> 
      </div> 

     <style> 
#sidebar-wrapper { 
    z-index: 1000; 
    left: 235px; 
    width: 0; 
    height: 100%; 
    margin-left: -235px; 
    overflow-y: auto; 
    overflow-x: hidden; 
    background: #252D3A; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease;} 

#wrapper.toggled #sidebar-wrapper { 
    width: 235px;} 

#wrapper.toggled #page-content-wrapper { 
    position: absolute; 
    margin-right: -235px;} 

#page-content-wrapper { 
    width: 100%; 
    padding-top: 20px;} 

#sidebar-nav { 
    position: absolute; 
    top: 0; 
    width: 235px; 
    margin: 0; 
    padding: 0; 
    list-style: none;} 
</style>

Quelle

2017-09-28 Muaath Ali

Bitte ändern Sie den Wert von CSS.

#wrapper.toggled #page-content-wrapper { 
    position: absolute; 
    width: calc(100% - 235px); 
    margin-left: 235px; 
}

Quelle

2017-09-28 13:59:41

Side Nav Bar Open/Collapse und Container Resize

Antwort

Verwandte Themen