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

i have a fluid layout based of twitters bootstrap.

我有一个基于twitters bootstrap的流畅布局。

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

It would be very nice to have the sidebar a fixed width. if a change the layout from fluid to "static" and set the width of sidebar to

侧边栏的固定宽度非常好。如果将布局从流体更改为“静态”并将侧边栏的宽度设置为

220px

and i resize the window or change my resolution to 1024... the body-content jumps under the sidebar. how can i avoid this?

然后我调整窗口大小或将分辨率更改为1024 ......正文内容跳转到侧边栏下方。我怎么能避免这个?

EDIT: Got it. Will post my "solution" later on. thanks for your responses

编辑:知道了。稍后会发布我的“解决方案”。谢谢你的回复

2 个解决方案

#1

I think you are looking something like this:

我想你看起来像这样:

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

here´s a fiddle for your convenience: http://jsfiddle.net/TT8uV/2/

这里是您方便的小提琴:http://jsfiddle.net/TT8uV/2/

As as general note:

如一般说明:

You don´t need to use bootstrap as your 'main container', so you can place your sidebar side-by-side with a grid system (like bootstrap fluid and responsive). This way you have A LOT of control of the sidebar, without affecting the actual content.

您不需要使用bootstrap作为“主要容器”,因此您可以将侧边栏与网格系统并排放置(如引导液和响应式)。这样您就可以对侧边栏进行大量控制,而不会影响实际内容。

Hope it works for you.

希望对你有效。

#2

I think this is what you need: http://jsfiddle.net/U8HGz/1/

我想这就是你需要的:http://jsfiddle.net/U8HGz/1/

#1