Question

我正在尝试学习如何使用Twitter Bootstrap 2.3.5实现固定侧边栏。

以下是我的代码片段

<div class="container">
  <div class="row">  
  <div  class="span4" id="sidebar-left">
            <h2 id="sidebar-head">Hello</h2>
            <p>Look at this stuff, isn't it neat wouldnt you think my collection complete. Wouldn't you think im a girl a girl who has everything.</p>
            <!--sidebar nav-->
            <ul class="nav nav-tabs nav-stacked" id="sidenav">
            <li><a href='#'>Home</a></li>
            <li><a href='#'>About Me</a></li>
            <li><a href='#'>Contact</a></li>
        </ul>
    </div>

        <div class="span8" id="main">
            <h1>Some Text Here </h1>
        </div>
    </div>
</div>

我在我的CSS中添加了这个，但#main和＃sidebar-left最终在另一个上面：

#sidebar-left {
    position:fixed;
}

#main {
    background-color:#39C;
    height: 1500px;
}

我做错了什么？

Answer 1

你可怜的不幸的灵魂，你没有指明位置。 position: fixed;很棒......但您需要top: 0; left: 0;或其他东西来定义它的展示位置。

Answer 2

玩完代码后。我终于得到了我的查询的解决方案：

首先：我将＃sidebar-left设置为向左浮动。这确保＃sidebar-left保留在容器内。但问题是，这会使#main堆叠在一起＃sidebar-left。

为了解决这个问题，我将#main放置到.offset4，以便将整个div 4网格向右移动。

    #sidebar-left {
    position:fixed;
    float: left;
}

<div class="span8 offset4" id="main">
            <h1>Some Text Here </h1>
        </div>

使用TwitterBootstrap 2.3.5修复补充工具栏

2 个答案: