Home/ Questions/Q 9226475
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T04:50:23+00:00

I’m creating a form that uses Twitter Bootstrap’s Fluid Grid system . A picture

  • 0

I’m creating a form that uses Twitter Bootstrap’s Fluid Grid system. A picture is worth a thousand words!

enter image description here

In the 3rd row (Paciente) there’s some nesting going on. As you can see this nesting is causing a different alignment in the 2 column if compared to the first two rows. If you look at the orange line you can spot that…

I’ve set up a demo at JS Bin: http://jsbin.com/ayazul/1 using the latest Bootstrap version 2.2.2.

Debugging with Firebug I see a left-margin of 30px in <div class="span3"> in the 2nd row/2nd column. If I manually change that value to 20px than the columns align correctly.

Why the first two rows have a different margin-left?

With the help of Sherbrow, here’s the final outcome the way I want it to be: http://jsbin.com/ayazul/29/ (the 2nd column is aligned in all three rows)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Why don’t you keep the same structure span6 > span6 on both rows instead of span3 on the top row and span6 > span6 on the second ?

    Check the updated JSBin http://jsbin.com/ayazul/28/

    This definitely adds extra markup, but it assures you the same appearance.

    The “why” is quite simple : the margin (gutter) of the fluid columns is based on the parent total width. If the parent is in fact a .span6 (50%) of the window width, it will have a lesser value than a column whose parent is at full window width. In other words, nested fluid spans diminishes the column real pixel width – for the fluid grid only.

    • 0