如何制作固定宽度的附加侧边栏导航(Bootstrap)?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (942)

在网上进行了几次搜索后,我无法找到满足我需求的解决方案。所以也许你们中的任何一个人都可以帮助找到做到这一点的好方法。

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

  • 主要部分:导航和内容包装
  • 导航需要在左侧“固定”为侧边栏,并且他的宽度需要固定
  • 内容包装器需要适应窗口的大小。

你认为Bootstrap可以做到吗?

提问于
用户回答回答于

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;
}

扫码关注云+社区

领取腾讯云代金券