创建一个固定的边栏，旁边是一个居中的引导带3网格
创建一个固定的边栏，旁边是一个居中的引导带3网格
提问于 2018-05-10 00:34:01
我想创建一个固定的边栏外我的中心引导网。在尝试这样做时，我面临的挑战是确定要向我的.container这样在调整屏幕大小时，它就不会与我的侧边栏重叠。
首先，我只使用CSS框架的网格部分，所以.container，.row和.col-md-12是从bootstrap.css文件本身并且不是自定义的。同时要记住我正在使用bootstrap 3因此，请不要对引导带2的流体网格解决方案提出任何建议，这在以前的线程中经常被问到。
HTML
<div id="left-nav"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet, nunc dictum at.</p>
</div>
</div>
</div>css
html, body {
height: 100%;
width: 100%;
}
#left-nav {
background: #2b2b2b;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 250px;
}回答 1
Stack Overflow用户
发布于 2018-05-10 09:34:02
HTML
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"><a href="#">Home</a></li>
<li><a href="#">Another link</a></li>
<li><a href="#">Next link</a></li>
<li><a href="#">Last link</a></li>
</ul>
</div>
<div id="page-content-wrapper">
<div class="page-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- content of page -->
</div>
</div>
</div>
</div>
</div>
</div>css
#wrapper {
padding-left: 250px;
transition: all 0.4s ease 0s;
}
#sidebar-wrapper {
margin-left: -250px;
left: 250px;
width: 250px;
background: #CCC;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
transition: all 0.4s ease 0s;
}
#page-content-wrapper {
width: 100%;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
@media (max-width:767px) {
#wrapper {
padding-left: 0;
}
#sidebar-wrapper {
left: 0;
}
#wrapper.active {
position: relative;
left: 250px;
}
#wrapper.active #sidebar-wrapper {
left: 250px;
width: 250px;
transition: all 0.4s ease 0s;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100004494
复制相关文章
相似问题