Twitter Bootstrap Css Static-fluid Form Positioning

I'm using the Twitter Bootstrap framework trying to get a layout like this: This is how it looks now: jsFiddle fullscreen jsFiddle The width of the form container changes based

Solution 1:

You put whole form into span3, it's about 25% of row width. Therefore, if resolution is big, span3 is not enough to contain whole form. On smaller resolutions, width of span3 becomes 100%, and on small resolutions looking good. Just use some other span class, and carefuly carefully calculate numbers in span classes. Like here Also, i prefer to use row-fluid class instead of row class, it's easier to manipulate with width.

Always use structure like this

<div class="row-fluid">
  <divclass"span3"><!-- content1 --></div><divclass"span9"><divclass="row-fluid"><divclass="span6"><!-- content2 -->
        </div
        <divclass="span6"><!-- content3 -->
        </div
     </div></div></div>

Note that always if i want new line in design without floating, and if i want 100% of width od parent element, i will use row-fluid. Because children elements can be again span elements the sum of the 12. In this example, "content1" will use 25% of width in big resolutions but in small resolutions it will have 100% width. In big resolutions, "content2" and "content3" will have 100% of parents width, but that is 75% of container width. In small resolutions, all span classes will have 100% width. If you don't want that in some cases, just override default bootstrap css with yours classes.

I hope you are understand what is my point. Sorry for my english :)

Solution 2:

This is what you want http://jsfiddle.net/YxKfc/14/, Please check it.

Solution 3:

As with many CSS frameworks you have to be very careful with padding. Take this off

.patch-well {
  padding: 20px;
}

Solution 4:

bootstrap also allows you to simulate minimum widths for objects by not requiring you to make the entire layout fluid. In your case, you can try making the wrapper span and row for that nav not be fluid.