行 ： margin-left: -20px;
行流体 :については何もありませんmargin-left。
row-fluid がmargin-left特定の値でこれを削除しないのはなぜ%ですか?
編集：
.row-fluid >.spanを追加してmargin-leftいます。
11869 次
2 に答える
4
Bootstrap の流動的な側面について詳しくは、 http ://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem をご覧ください。
これは、カプセル化された<span>タグに. 負の左マージンは、行が正しく表示されるようにこれに対抗するためのものです。この関係により、そのカプセル化内のスパン タグには左マージンがないため、これを内部で修正する必要はありません。.rowmargin-left: 20px.row-fluid > span.row-fluid
于 2013-03-28T08:45:26.127 に答える
3
それを説明するのは難しいです。あなたの答えは太字で、残りは文脈です。
静的レイアウトのときのロジックは何ですか?
span要素は、margin-left: 20px他の から分離したままにする必要がありspanます。
row要素はmargin-left: -20px、最初の要素、spanまたはspan「左の列」に配置された要素が の先頭に配置されるようにする必要がありcontainerます。
staticrowがその を設定していないwidthため機能するためmargin-left: -20px、要素の幅を減算せず、先祖を埋め続けます。
流動的なレイアウトではどうなりますか?
同じロジックを試すこともできますが、違いは、要素のwidthandmargin-leftがspanパーセントで定義されていることです。そのため、要素の実際の幅をrow(負の を適用してmargin) 増やすと、これらのspan要素もサイズが増加するため、要素は増加しません。に収まりますcontainer。
したがって、流動的なレイアウトは、同様の結果を得るために別の手法を使用し、 を に適用するだけmargin-left: 0です:first-child。
より深く掘り下げる
そして、両方のレイアウトで同じ戦略を使用してみませんか? 確かに、それは実装を簡素化しますが、静的手法 (流体には適用できません) の方が強力です。これは、「左の列」に該当する要素は、存在する:first-childかどうかに関係なく、「余白が修正された」ものになるためです。静的レイアウトでは、応答性を快適に提供するためにそのような動作が必要ですが、流動的なレイアウトは多かれ少なかれそれなしで管理できます。
于 2013-06-12T17:14:51.223 に答える