Bootstrap流体布局 - 侧栏的固定宽度 [英] Bootstrap fluid layout - fixed width of sidebar

问题描述

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

i have a fluid layout based of 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

并且调整窗口大小或更改我的分辨率为1024 ... body-content跳到边栏下面。我怎么能避免这种情况？

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

编辑：
将后我的解决方案。感谢您的回应

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

推荐答案

我认为您看起来像这样：

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>

这里为您提供方便： http://jsfiddle.net/TT8uV/2/

如一般注意：

你不需要使用bootstrap作为你的'主容器'，所以你可以把你的
边栏并排与网格系统bootstrap
流畅和响应）。这样，您就可以 控制
侧边栏，而不会影响实际内容。

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流体布局 - 侧栏的固定宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！