7

行 ： margin-left: -20px;

行流体 :については何もありませんmargin-left。

row-fluid がmargin-left特定の値でこれを削除しないのはなぜ%ですか?

編集：
.row-fluid >.spanを追加してmargin-leftいます。

4

2 に答える 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 に答える