Bootstrap fluid layout - fixed width of sidebar

问题

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

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

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

回答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/

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.

Hope it works for you.

回答2:

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

来源：https://stackoverflow.com/questions/9589333/bootstrap-fluid-layout-fixed-width-of-sidebar

标签

css

tooltip

twitter-bootstrap

sidebar