html - Bootstrap:调整页面大小时如何防止侧边栏和主 div 折叠?
问题描述
我正在尝试制作一个在调整大小时不会折叠的页面,而只是水平缩放以适应。我想出了如何防止侧边栏折叠(通过删除@media),但是现在当在某个点调整大小时,主要内容仍然向左折叠,导致一些内容隐藏在侧边栏后面。我该如何防止这种情况发生?我假设必须编写一些东西来覆盖默认样式。
这是我的 HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li>
</ul>
</div>
<div class="col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
<h2 class="sub-header">Section title</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
和自定义 CSS:
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
.nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #fff;
background-color: #428bca;
}
.main {
padding-right: 40px;
padding-left: 40px;
padding-top: 10px;
display: block;
}
.main .page-header {
margin-top: 0;
}
提前致谢。
解决方案
.sidebar {
/* position: fixed; */
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
background-color: #f5f5f5;
/* border-right: 1px solid #eee; */
}
.nav-sidebar {
/* margin-right: -21px; */
/* 20px padding + 1px border */
/* margin-bottom: 20px; */
/* margin-left: -20px; */
}
.nav-sidebar > li > a {
/* padding-right: 20px;
padding-left: 20px; */
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #fff;
background-color: #428bca;
}
.main {
/* padding-right: 40px; */
/* padding-left: 40px; */
/* padding-top: 10px; */
/* display: block; */
}
.main .page-header {
/* margin-top: 0; */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<!-- <div class='col-xs-12'> -->
<div class="col-xs-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li>
</ul>
</div>
<div class="col-xs-10 main">
<h1 class="page-header">Dashboard</h1>
<h2 class="sub-header">Section title</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
</table>
</div>
</div>
<!-- </div> -->
</div>
</div>
这是一个工作原型,更改只是将侧边栏位置从固定位置移除。
/* position: fixed; */
Bootstrap 将负责定位到网格中。演示
推荐阅读
- c# - 如何在 Arfoundation 中的 AR 平面上进行碰撞?
- javascript - 如何在javascript中使用类
- javascript - classList.toggle() 不工作 IE11 Angular 7(无效的调用对象)
- javascript - 通过动态变量名获取变量值
- java - 为什么我的程序不能正确循环?(爪哇)
- ios - 为什么 UIView 会填充 superView?
- reactjs - React Native 中单个图像组件上的多个 onPress 事件
- apache - 如果虚拟文档根不存在,如何设置默认文档根?
- laravel-5 - 当课程在vue js的文本区域中时调用方法
- java - 使用 JAVA 8 Stream API 查找嵌套类的多个属性的平均值