Bootstrap Fixed Column

Question

I need to make the right column of a fixed width on boot, but the left column will be responsive.

I am using Bootstrap 2.3.2

_{(source: toile-libre.org )}

The right column will not be resized in all screen sizes.

Answer 1

My basic solution is below ( see here in action ). I filled out CSS to demonstrate blocks with colors, but you really need to do the following:

Fixed element

• Set float:right
• Apply fixed width to it

Fluid line element

• Apply padding/margin-right equal to the width of the fixed element
• Apply box-sizing:border-box , so that 100% width with respect to the .row-fluid element is preserved, but adding a field / .row-fluid does not push it further. The markup below shows the minimum level you will need.

CSS

 #fixed-width { width:100px; float:right; } #fluid.row-fluid { margin-right:100px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } 

HTML

 <div class="clearfix"> <div id="fixed-width">Content...</div> <div id="fluid" class="row-fluid"> <div class="span4">a</div> <div class="span4">b</div> <div class="span4">c</div> </div> </div> 

Answer 2

it does not provide bootstrap with this kind of design, but there are simple solutions.

Here is one of them, see the accepted answer to this previous question SO Loading tray: fixed gutter width in the liquid layout?

and in particular these css tricks

 .fluid-fixed { margin-right: 240px; margin-left:auto !important; } 

as shown in this script http://jsfiddle.net/6vPqA/808/