Question

在网上进行多次搜索后，我无法找到符合我需求的解决方案。所以也许你们中的任何一个人都可以帮助找到实现它的好方法。

差不多，我想使用Bootstrap来制作类似于这个的模板结构：http://themes.mediacreed.com/html/synergy/#portfolio.html

2个主要部分：导航和内容包装器
导航需要在左侧“贴”作为侧边栏，并且他的宽度需要修复
内容包装器需要适应窗口的大小。

你认为Bootstrap可以做到吗？干杯

Answer 1

好的，经过网上搜索后，我找到了这个解决方案：

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/（但我只保留必要的）

希望它可以提供帮助

Answer 2

这是最新的Bootstrap 3 ..的另一个固定侧边栏选项。

演示：http://www.bootstrapzero.com/bootstrap-template/basis

代码：http://www.bootply.com/86704

如何制作固定宽度的附加侧边栏导航（Bootstrap）

2 个答案: