引导程序布局:不填充浏览器的内容
问题描述:
我有一个带侧边栏的管理屏幕。除了主要内容不会填充浏览器宽度外,一切运作良好。我尝试了很多选择,但我无法解决这个难题。你提供帮助和建议表示赞赏引导程序布局:不填充浏览器的内容
这里是我的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%;
}
更清晰的图像显示在右侧的差距 -
答
发现问题 - 这是导致问题的这段CSS。我删除它,它运作良好 - 但留下我的另一个问题。如何限制左侧导航栏的宽度而不会失去响应性?任何建议表示赞赏。
@media only screen
and (min-width : 1200px) {
.sidebar-offcanvas {
width: 180px;
}
}
尝试从.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