Twitter Bootstrap流動網格系統嵌套不與前一行對齊

enter image description here

在第三行（Paciente）有一些嵌套回事。正如你可以看到，如果與前兩行相比，這個嵌套在2列中會導致不同的對齊。如果你看橙色線，你可以發現...

我已經在JS斌設置演示：http://jsbin.com/ayazul/1使用最新的Bootstrap版本2.2.2。

使用Firebug進行調試我在第二行/第二列中看到30px的left-margin<div class="span3">。如果我手動將該值更改爲20px比列正確對齊。

爲什麼前兩行有不同的餘裕？

隨着Sherbrow的幫助下，這裏是最後的結局我想這是方式：http://jsbin.com/ayazul/29/（第2列在所有三排排列）

嘗試使用瀏覽器的開發工具看標記，它應該告訴你在哪裏的微胖/保證金/等，如果有的話。 –

當然，我這樣做......它是Bootstrap的計算，添加了不同的邊距，使用流體嵌套。 –

你爲什麼不保持相同的結構span6 > span6而不是第一行的span3而span6 > span6第二行？

這無疑增加了額外的標記，但它向你保證相同的外觀。

「爲什麼」很簡單：流體柱的邊距（溝槽）是基於總體寬度的。如果父窗口實際上是窗口寬度的.span6（50％），則它的值將小於父窗口寬度爲全列的列。換句話說，嵌套的流體跨度會減小列的真實像素寬度 - 僅適用於流體網格。

2013-02-03 01:44:02 Sherbrow

非常好的Sherbrow！ :)你解釋了一切！不得不添加額外的標記不是一個問題......這是一個功能。 hehehe –

您的標記比它應該更復雜。你有太多的.row-fluids和.span$類比需要。爲什麼不像這樣簡單？

2013-02-03 01:53:16 istos

您提供了一個不需要流體嵌套的好的和有效的選擇。謝謝istos！ –

回答