3

在网上搜索了几次后，我找不到满足我需求的解决方案。所以也许你们中的任何人都可以帮助我找到做这件事的好方法。

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

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

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

4

2 回答 2

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

希望它可以帮助

于 2013-09-07T00:40:58.133 回答
0

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

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

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

于 2014-02-28T16:17:21.277 回答