側導航欄打開/摺疊和容器大小調整

因此，我使用引導程序來構建帶有側面導航欄的儀表板。當導航欄打開時，容器內容被推向右側並離開屏幕。我希望整個容器的大小適合屏幕。因此，無論導航欄是打開還是摺疊，容器都應該完全可見。是否有一個引導CSS類我可以添加到身體或容器來解決這個問題？側導航欄打開/摺疊和容器大小調整

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

來源

2017-09-28 Muaath Ali

請更改css的值。

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

來源

2017-09-28 13:59:41

側導航欄打開/摺疊和容器大小調整

回答

相關問題