Системата Twitter Bootstrap Fluid Grid не е подравнена с предишните редове

Създавам формуляр, който използва системата Fluid Grid на Twitter Bootstrap. Една снимка струва повече от хиляда думи!

въведете описание на изображението тук

В 3-ти ред (Paciente) има някакво гнездене. Както можете да видите, това влагане причинява различно подравняване в колона 2 в сравнение с първите два реда. Ако погледнете оранжевата линия, можете да забележите, че...

Настроих демонстрация в JS Bin: http://jsbin.com/ayazul/1 използвайки най-новата версия на Bootstrap 2.2.2.

Отстраняване на грешки с Firebug Виждам left-margin от 30px в <div class="span3"> във 2-ри ред/2-ра колона. Ако ръчно променя тази стойност на 20px, тогава колоните се подравняват правилно.

Защо първите два реда имат различно ляво поле?

С помощта на Sherbrow, ето крайния резултат, какъвто искам да бъде: http://jsbin.com/ayazul/29/ (втората колона е подравнена и в трите реда)


css twitter-bootstrap nested grid-layout fluid-layout
person Leniel Maccaferri    schedule 03.02.2013    source източник
comment
Опитайте да погледнете маркировката, като използвате инструментите за разработка на браузъра си, тя трябва да ви покаже къде е допълнителната подложка/поле/и т.н., ако има такава.   -  person Ricardo Sanchez    schedule 03.02.2013
comment
Разбира се, че го направих... това са изчисленията на Bootstrap, които добавят това различно ляво поле при използване на течно влагане.   -  person Leniel Maccaferri    schedule 03.02.2013

Отговори (2)


arrow_upward
2
arrow_downward

Защо не запазите същата структура span6 > span6 на двата реда вместо span3 на горния ред и span6 > span6 на втория?

Проверете актуализирания JSBin http://jsbin.com/ayazul/28/

Това определено добавя допълнителна маркировка, но ви гарантира същия външен вид.

„Защо“ е доста просто: маржът (улукът) на колоните с течност се базира на общата ширина на родителя. Ако родителят всъщност е .span6 (50%) от ширината на прозореца, той ще има по-малка стойност от колона, чийто родител е с пълна ширина на прозореца. С други думи, вложените течни обхвати намаляват реалната пикселна ширина на колоната - само за течната мрежа.

person Sherbrow    schedule 03.02.2013
comment
Наистина хубав Sherbrow! :) Обяснихте всичко! Трябва да добавите, че допълнителното маркиране не е проблем... това е функция. хехехе - person Leniel Maccaferri; 03.02.2013

arrow_upward
3
arrow_downward

Вашето маркиране е по-сложно, отколкото би трябвало да бъде. Имате твърде много .row-fluids и .span$ класове от необходимото. Защо не нещо толкова просто като това?

http://jsbin.com/ayazul/6/

person istos    schedule 03.02.2013
comment
Предоставихте хубава и валидна алтернатива без необходимост от течно влагане. Благодаря istos! - person Leniel Maccaferri; 03.02.2013