css - Bootstrap - ネストのベスト プラクティス - 行とスパン

Question

ネストを使用する最良の方法は何ですか。

行内の複数のスパン -動的コンテンツ:

• 12 列に 1 行 ?
• または、任意の数の列に対して 1 つの行ですか?

サンプルケースn°1 - どれが一番良いか、そしてその理由は? :

<div class="row">
    <span class="span6"></span>
    <span class="span6"></span>
    <span class="span6"></span>
    <span class="span6"></span>
</div>

または

<div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
</div>
<div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
</div>

---

サンプル ケース n°2 - コンテンツを整理するためのレベルを増やします。

ここでは、div "my_margin" を使用して左右にマージンを追加します。その周りに "first_row" が必要です。

つまり、 row-->span10、offset1-->row-->SPANS です。

<div id="first_row" class="row">
    <div id="my_margin" class="span10 offset1">
        <div class="row">
            <div class="span6"></div>
            <div class="span6"></div>
            <div class="span6"></div>
            <div class="span6"></div>
        </div>
    </div>
</div>

または、

span10,offset1 ではなく直接マージンを使用する必要があります。

その場合、@Media_size ごとにルールを作成してレスポンシブにする必要があります。

<div style="margin-right:XYpx; margin-left:XYpx" class="row">
    <div class="span6"></div>
    <div class="span6"></div>
    <div class="span6"></div>
    <div class="span6"></div>
</div>

または-スパンはメインコンテンツに使用することが「想定」されており、CSSで遊ぶだけです。だから、そのようなもの：

<div row>
    <div class="span6">
        http://jsfiddle.net/JkPhw/
    <div class="span6">
    <div class="span6">
        http://jsfiddle.net/JkPhw/
    <div class="span6">
</div>