引導程序佈局：不填充瀏覽器的內容

我有一個帶側邊欄的管理屏幕。除了主要內容不會填充瀏覽器寬度外，一切運作良好。我嘗試了很多選擇，但我無法解決這個難題。你提供幫助和建議表示讚賞引導程序佈局：不填充瀏覽器的內容

Screenshot showing gap between content and browser window

這裏是我的HTML

 <!-- top navigation menu element --> 
     <div id="wrap"> 
      <div class="container-fluid"> 

       <div class="row row-offcanvas row-offcanvas-left"> 
        <div class="col-sm-3 col-md-2 sidebar-offcanvas" id="sidebar" role="navigation"> 
         <ul class="nav nav-sidebar"> 
          <li id="departments"> 
          <i class="fa fa-fw fa-sitemap"></i> <span>Departments</span> 
          </li> 
          <li id="permissions"> 
           <i class="fa fa-fw fa-key"></i> <span>Permissions</span> </a> 
          </li> 
          </ul> 
        </div><!-- .col-sm-3 .col-md-2 .sidebar-offcanvas --> 

        <div class="col-sm-9 col-md-10 main"> 
         <!--toggle sidebar button--> 
         <p class="visible-xs"> 
          <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas"> 
           <i class="glyphicon glyphicon-chevron-left"></i> 
          </button> 
         </p> 

         <h1 class="page-header inline-page-title">Groups</h1> 

         <!-- main content --> 

        </div><!-- .col-sm-9 .col-md-10 .main --> 
       </div> <!-- .row .row-offcanvas .row-offcanvas-left --> 
      </div><!-- .container-fluid --> 
     </div> <!-- #wrap -->

我的CSS

body { 
    padding-top: 50px; 
    background-color: #f5f5f5; 
} 
.main { 
    padding: 20px; 
    background-color: #fff; 
    border-left: 1px solid #dae3e9; 
    height: 100%; 
    box-shadow: -3px 3px 3px -2px #f1f1f3; 
} 

.sidebar-offcanvas { 
    min-height: 100%; 
}

更清晰的圖像顯示在右側的差距 - see gap on right side

來源

2014-10-16 ChicagoSky

嘗試從.main中刪除任何填充和頁邊距 – colonelsanders 2014-10-16 18:03:55

您可以在此處張貼小提琴嗎？此外，正如@colonelsanders所提到的，在.main上填充會與默認引導列填充混淆。相反，嘗試使用.main包裝col內的內容。 – 2014-10-16 18:07:24

小提琴在這裏 - http://jsfiddle.net/chicagosky/73aen3qd/4/你將不得不全屏幕，並拉伸瀏覽器窗口（和結果窗口），以最大限度地看到問題 – ChicagoSky 2014-10-16 18:15:27

發現問題 - 這是導致問題的這段CSS。我刪除它，它運作良好 - 但留下我的另一個問題。如何限制左側導航欄的寬度而不會失去響應性？任何建議表示讚賞。

@media only screen 
and (min-width : 1200px) { 
    .sidebar-offcanvas { 
     width: 180px; 
    } 
}

來源

2014-10-16 18:37:02 ChicagoSky

引導程序佈局：不填充瀏覽器的內容

回答

相關問題