Bootstrap流体布局 - 侧边栏固定宽度

Question

我有一个基于Twitter的Bootstrap的流式布局。

<div class="container-fluid">
    <div class="row-fluid">
       <div class="span2">
           <!--Sidebar content-->
       </div>
       <div class="span10">
           <!--Body content-->
       </div>
    </div>
</div>

如果侧边栏的宽度是固定的，那就很好了。如果我将布局从流体更改为“静态”，并将侧边栏的宽度设置为

220px

当我调整窗口大小或将分辨率更改为1024时，页面内容会跳到边栏下方。我该如何避免这种情况？

编辑: 明白了，稍后会发布我的“解决方案”。感谢你们的回答。

- Jens

---

你能否使用类似 jsfiddle 的工具提供一个测试用例吗？我还不太明白你在这里想要实现什么效果。 - Andres Ilich

那么...你的这个著名的“解决方案”是什么？ :) - R Thiede

是的，请发布您的解决方案，我也很感兴趣。固定宽度的侧边栏与页面的其余部分流体布局...我无法实现。 - Jorge Sampayo

这是一个解决方案：http://ekdhl.net/blog/2012/10/19/fixed-width-static-sidebar-with-twitter-bootstrap-fluid-layout/ - C. E.

我已经找到了一个非常出色的解决方案，但是我无法在stackoverflow评论中适应它。-- Jens. ;) - aquinas

Answer 1

我认为你在寻找类似这样的东西：

<div class="sidebar span4">
    this is my fixed sidebar
</div>
<div class="main">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span2">this is fluid</div>
            <div class="span3 offset1">yeah!</div>
            <div class="span6">Awesome!</div>
        </div>
        <div class="row-fluid">
            <div class="span6">1 half</div>
            <div class="span6">2 half</div>
        </div>
    </div>
</div>

这里提供了一个 JSFiddle 以便参考：http://jsfiddle.net/TT8uV/2/

总体说明：

您不必将 Bootstrap 作为“主容器”，因此可以将侧边栏与网格系统（如 Bootstrap 的流式和响应式）并排放置。这样，您就可以对侧边栏进行大量控制，而不会影响实际内容。

希望对您有所帮助。

- Bart Calixto

---

这是唯一解决固定宽度的答案。其他答案都是关于固定位置的。+1 - roeland

我很感激这个尝试，但问题是右侧主要内容的第二行比右侧边栏底部更低。请注意，“1 half”和“2 half”（它们是主导航中第二个row-fluid中的spans）浮动在其下方：http://jsfiddle.net/TT8uV/2/show/ - Nicholas Petersen

我认为这与解决方案无关，但无论如何，我在此处更新了行的overflow:auto：http://jsfiddle.net/TT8uV/35/ 或者您可以将侧边栏postion:absolute http://jsfiddle.net/TT8uV/36/ - Bart Calixto

这是正确的解决方案 - 你不需要为所有内容使用Bootstrap网格。拥有一个单独的侧边栏是最好的。请接受这个答案！ - VladFr

Answer 2

我认为这就是你所需要的内容：http://jsfiddle.net/U8HGz/1/。

- Yiannis Gkoufas

---

不行，因为侧边栏的位置是固定的。我的右侧行/容器宽度约为3000-4000像素。所以如果我向右滚动，侧边栏始终在顶部。 但还是谢谢你的回复。 - Jens