引导程序布局：不填充浏览器的内容

我有一个带侧边栏的管理屏幕。除了主要内容不会填充浏览器宽度外，一切运作良好。我尝试了很多选择，但我无法解决这个难题。你提供帮助和建议表示赞赏引导程序布局：不填充浏览器的内容

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

引导程序布局：不填充浏览器的内容

回答

相关问题