css - Twitter Bootstrap Fluid Grid システムのネストが前の行と整列しない

Question

Twitter Bootstrap の Fluid Grid システムを使用するフォームを作成しています。写真は千の言葉に値する！

ここに画像の説明を入力

3 行目 ( Paciente ) では、ネストが行われています。ご覧のとおり、このネスティングにより、最初の 2 行と比較すると、2 列で異なる配置が発生しています。オレンジ色の線を見れば分かると思いますが…

最新の Bootstrap バージョン 2.2.2 を使用して、 JS Bin: http://jsbin.com/ayazul/1でデモをセットアップしました。

Firebug を使用したデバッグ2 行目/2 列目にが表示left-marginさ30pxれます。<div class="span3">その値を手動で変更すると20px、列が正しく整列します。

最初の 2 行の margin-left が異なるのはなぜですか?

Sherbrowの助けを借りて、これが私が望む最終結果です: http://jsbin.com/ayazul/29/ (2列目は3行すべてに配置されています)

score 3 · Accepted Answer

マークアップが必要以上に複雑です。.row-fluids必要以上の.span$クラスが多すぎます。なぜこのような単純なものではないのですか？

score 2 · Accepted Answer

一番上の行と2番目の行ではspan6 > span6なく、両方の行で同じ構造を維持しないのはなぜですか?span3span6 > span6

更新された JSBin を確認してくださいhttp://jsbin.com/ayazul/28/

これにより、間違いなくマークアップが追加されますが、同じ外観が保証されます。

「理由」は非常に単純です。流体列のマージン (ガター) は、親の合計幅に基づいています。親が実際.span6にウィンドウ幅の (50%) である場合、親がウィンドウ幅全体である列よりも小さい値になります。つまり、ネストされた流体スパンは、列の実際のピクセル幅を縮小します (流体グリッドのみ)。

2 に答える 2