在居中的 Bootstrap 3 网格旁边创建一个固定的侧边栏 [英] Creating a fixed sidebar alongside a centered Bootstrap 3 grid
问题描述
我想创建一个固定的侧边栏,它位于外部我居中的 Bootstrap 网格.我在尝试执行此操作时面临的挑战是确定要应用/覆盖我的 .container
的其他样式,以便在调整屏幕大小时它不会与我的侧边栏重叠.
对于初学者,我只使用 css 框架的网格部分,所以 .container
、.row
和 .col-md-12
是从 bootstrap.css
文件本身提取的代码,不是自定义的.另请记住,我使用的是 Bootstrap 3,所以请不要为 Bootstrap 2 的流体网格解决方案提供建议,这在以前的线程中经常被问到.
HTML
<div id="left-nav"></div><div class="容器"><div class="row"><div class="col-md-12"><p>Lorem ipsum dolor sat amet, nunc dictum at.</p>
CSS
html, body {高度:100%;宽度:100%;}#左导航{背景:#2b2b2b;位置:绝对;顶部:0px;左:0px;高度:100%;宽度:250px;}
正如draw_w 所说,你可以在这里找到一个很好的例子.
HTML
<div id="sidebar-wrapper"><ul class="sidebar-nav"><li class="sidebar-brand"><a href="#">首页</a></li><li><a href="#">另一个链接</a></li><li><a href="#">下一个链接</a></li><li><a href="#">最后一个链接</a></li><div id="page-content-wrapper"><div class="page-content"><div class="容器"><div class="row"><div class="col-md-12"><!-- 页面内容-->