如何制作固定宽度的附加侧边栏导航(Bootstrap)
如何制作固定宽度的附加侧边栏导航(Bootstrap)
提问于 2013-09-06 04:47:54
在网上搜索了几次后，我还是找不到我需要的解决方案。所以也许你们中的任何一个人都能帮我找到好的方法。
基本上，我想使用Bootstrap来创建一个类似于下面的模板结构：http://themes.mediacreed.com/html/synergy/#portfolio.html
- 2主要部分:导航和内容包装器
- 导航需要作为侧边栏贴在左侧，宽度需要固定
- 内容包装器需要适应窗口的大小。
你认为Bootstrap可以做到这一点吗？干杯
回答 2
Stack Overflow用户
发布于 2013-09-07 08:40:58
好的，在网上进行了更多的搜索后，我找到了这个解决方案：
HTML
<!-- Begin Side Nav -->
<div class="sideNav">
<h5>item</h5>
</div>
<!-- End Side Nav -->
<!-- Begin Main Content -->
<div class="content">
<!-- here the content........ -->
</div>CSS
.content
{
overflow: hidden;
position: absolute;
top: 0px;
bottom: 0px;
left: 100px;
right: 0px;
padding: 0px 10px;
overflow: auto;
}
.sideNav
{
padding: 10px 0;
position: fixed;
left: 0px;
top: 0px;
bottom: 0px;
width: 100px; /* same as .content left */
background-color: #fff;
border-right: 1px solid #000;
z-index: 1020;
}这段代码的灵感来自于http://jsfiddle.net/whoiskb/GqXdM/light/ (但我只保留了必要的部分)
希望能有所帮助
Stack Overflow用户
发布于 2014-03-01 00:17:21
下面是最新Bootstrap 3的另一个固定侧边栏选项。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18645667
复制相关文章
相似问题