防止Y型溢流加入少量左旁引導列時

Question

背景：

我試圖創建一個基於關引導管理面板例子的可摺疊側欄導航菜單... https://v4-alpha.getbootstrap.com/examples/dashboard/

問題：

當管理欄處於摺疊模式時，會顯示一小塊圖標。我將margin-left: 50px添加到主要內容中，以便留出左欄的空間，但是隨後它會將我的主內容推到屏幕的右側。

這裏是我的問題的截圖：

我到目前爲止有：

我的標記

<!-- top navigation --> 
     <nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse"> 
      <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> 
       <span class="navbar-toggler-icon"></span> 
      </button> 
      <a class="navbar-brand" href="#">Dashboard</a> 

      <div class="collapse navbar-collapse" id="navbarsExampleDefault"> 
       <ul class="navbar-nav mr-auto"> 
        <li class="nav-item"> 
         <a class="nav-link" href="#"> 
          Teach 
         </a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link" href="#"> 
          Config 
         </a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link" href="#">Profile</a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link" href="#">Help</a> 
        </li> 
       </ul> 
       <form class="form-inline mt-2 mt-md-0"> 
        <input class="form-control mr-sm-2" placeholder="Search" type="text"> 
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
       </form> 
      </div> 
     </nav> 
     <!-- end top navigation --> 

     <div class="container-fluid"> 
      <div class="row"> 

       <!-- sidebar navigation --> 
       <nav id="sidebar" class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar"> 

        <div class="sidebar-header"> 
         <a id="toggleSidebar" href="#"> 
          <i class="fa fa-bars" aria-hidden="true"></i> 
         </a> 
        </div> 

        <div class="sidebar-section"> 
         <li class="nav-item"> 
          <a class="nav-link active" href="#"> 
           <span><i class="fa fa-tachometer" aria-hidden="true"></i></span> 
           <span>Dashboard</span> 
          </a> 
         </li> 
         <li class="nav-item"> 
          <a class="nav-link" href="#"> 
           <span><i class="fa fa-shopping-basket" aria-hidden="true"></i></span> 
           <span>Bookings</span> 
          </a> 
         </li> 
         <li class="nav-item"> 
          <a class="nav-link" href="#"> 
           <span><i class="fa fa-credit-card" aria-hidden="true"></i></span> 
           <span>Payments</span> 
          </a> 
         </li> 
         <li class="nav-item"> 
          <a class="nav-link" href="#"> 
           <span><i class="fa fa-database" aria-hidden="true"></i></span> 
           <span>Classes</span> 
          </a> 
         </li> 
        </div> 

        <div class="sidebar-section"> 
         <li class="nav-item"> 
          <a class="nav-link" href="#"> 
           <span><i class="fa fa-certificate" aria-hidden="true"></i></span> 
           <span>Courses</span> 
          </a> 
         </li> 
         <li class="nav-item"> 
          <a class="nav-link" href="#"> 
           <span><i class="fa fa-book" aria-hidden="true"></i></span> 
           <span>Curriculum</span> 
          </a> 
         </li> 
        </div> 

        <div class="sidebar-section"> 
         <li class="nav-item"> 
          <a class="nav-link" href="#"> 
           <span><i class="fa fa-users" aria-hidden="true"></i></span> 
           <span>Groups</span> 
          </a> 
         </li> 
         <li class="nav-item"> 
          <a class="nav-link" href="#"> 
           <span><i class="fa fa-user" aria-hidden="true"></i></span> 
           <span>Students</span> 
          </a> 
         </li> 
         <li class="nav-item"> 
          <a class="nav-link" href="#"> 
           <span><i class="fa fa-graduation-cap" aria-hidden="true"></i></span> 
           <span>Teachers</span> 
          </a> 
         </li> 
        </div> 

        <div class="sidebar-section"> 
         <li class="nav-item"> 
          <a class="nav-link" href="#"> 
           <span><i class="fa fa-tachometer" aria-hidden="true"></i></span> 
           <span>Marketing</span> 
          </a> 
         </li> 
        </div> 

       </nav> 
       <!-- end sidebar navigation --> 

       <!-- main content --> 
       <main id="mainContent" class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3"> 
        <h1>Dashboard</h1> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
       </main> 
       <!-- end main content --> 

      </div> 
     </div> 

我的CSS

/*bootstrap style*/ 
body { 
    padding-top: 50px; 
} 

.sidebar { 
    border-right: 1px solid #444444; 
    background: #353C3E; 
    bottom: 0; 
    left: 0; 
    overflow-x: hidden; 
    overflow-y: auto; 
    padding-right: 0px; 
    padding-left: 0px; 
    position: fixed; 
    top: 51px; 
    z-index: 1000; 
} 

/*sidebar button*/ 
#toggleSidebar { 
    display: block; 
    padding: 10px; 
} 

#toggleSidebar i { 
    color: white; 
} 

.sidebar-header { 

} 

.sidebar-header a { 
    text-align: right; 
} 

.sidebar-section { 
    padding-bottom: 30px; 
    border-top: 1px solid #444444; 
    list-style: outside none none; 
} 

.sidebar-section .nav-item { 
    border-bottom: 1px solid #444444; 
} 

.sidebar-section i { 
    color: #aaaaaa; 
    margin-right: 20px; 
} 

.sidebar-section a { 
    color: #ffffff; 
    background: #292b2c; 
} 

.sidebar-section a:hover { 
    color: #ffffff; 
    background: #777777; 
} 

.sidebar .active { 
    background: #999999; 
    border-left: 10px solid #ffffff; 
} 

.sidebar .active i { 
    color: white; 
} 

/*when collapsed*/ 
.sidebar-smaller { 
    overflow-y: hidden; 
} 

.sidebar-smaller div li a span:nth-child(2) { 
    display: none; 
} 

.sidebar-smaller i { 
    color: #aaaaaa; 
    margin-right: 0px; 
    text-align: center !important; 
} 

.sidebar-smaller .sidebar-header a { 
    text-align: center; 
} 

.sidebar-smaller .active { 
    color: #aaaaaa; 
    border-left: none; 
} 

.content-wider { 
    margin-left:54px; 
} 

我的jQuery切換代碼

$(function(){ 

      // cache the dom 
      $sidebar  = $('#sidebar'); 
      $toggleSidebar = $('#toggleSidebar'); 
      $mainContent = $('#mainContent'); 
      toggled  = false; 

      $toggleSidebar.click(function(){ 

       if (toggled === false) { 

        // shrink the sidebar 
        $sidebar.addClass('sidebar-smaller'); 
        $sidebar.removeClass('col-sm-3 col-md-2'); 

        $mainContent.addClass('content-wider col-12'); 
        $mainContent.removeClass('col-sm-9 offset-sm-3 col-md-10 offset-md-2'); 

        toggled = true; 

       } else { 

        // expand the sidebar 
        $sidebar.addClass('col-sm-3 col-md-2'); 
        $sidebar.removeClass('sidebar-smaller'); 

        $mainContent.addClass('col-sm-9 offset-sm-3 col-md-10 offset-md-2'); 
        $mainContent.removeClass('content-wider col-12'); 

        toggled = false; 

       } 


       // remove the class col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3 

       // add the class col-sm-12 col-md-12 pt-3 


      }); 

     }); 

Answer 1

您不必如果你使用了正確的同事指定留給內容保證金 - 在導航和主要內容類。他們的行爲完全像一個網格。

我不認爲你需要補償。

Answer 2

正如我所看到的，側欄有位置固定，所以它應該重疊main-content當main-content有類col-*-12？所以你可以設置不是margin-left，而是padding-left到.content-wider？