Nested div Größe mit in Bootstrap-Offset

Question

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-12" style="background-color:pink;"> 
    <p> 
    test 
    </p> 
    </div> 
    <div class="col-sm-8 col-sm-offset-2" style="background-color:green;"> 
     <div class="col-sm-8" style="background-color:red;"> 
     <p> 
     red 
     </p> 
     </div> 
     <div class="col-sm-2" style="background-color:blue;"> 
     <p> 
     blue 
     </p> 
     </div> 
     <div class="col-sm-2" style="background-color:yellow;"> 
     <p> 
     yellow 
     </p> 
     </div> 
    </div> 
    </div> 
</div> 

https://jsfiddle.net/b7f5ob1g/1/

ich dieses Layout erstellt, aber ich habe nicht die Dimensionierung verstehen.

Die äußere div mit der id = „Wrapper“ bekam eine col Größe von 8, 2 versetzt (die nach rechts von 2 cols zog es wird bedeutet, so gibt es 2 auf der rechten freien Raum cols.

Also insgesamt habe ich 8 cols für den Inhalt.

nun mit den drei inneren div-Tags in meinem Verständnis i die Spalten Größe versucht

div1: col size 6 
div2: col size 1 
div3: col size 1 

wird es bis 8. So resümierte Aber dann seine zu klein, ich muss es bis 12 zusammenfassen.

Wie div1: 8, div2: 2, div3: 2.

Muss ich in solchen verschachtelten divs zu 12 cols zählen oder können Sie mir bitte diese Situation erklären?

Answer 1

In Bootstrap grid system müssen alle col- * Elemente in ein .row Element eingewickelt werden. Innerhalb jedes .row haben Sie 12 Spalten, egal wie groß/klein der übergeordnete Spaltencontainer ist. Das heißt, sollten Sie Ihre html wie folgt aussehen:

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-12" style="background-color:pink;"> 
     <p>test</p> 
    </div> 
    <div class="col-sm-8 col-sm-offset-2" style="background-color:green;" id="wrapper"> 
     <div class="row"> 
     <div class="col-sm-8" style="background-color:red;"> 
      <p>red</p> 
     </div> 
     <div class="col-sm-2" style="background-color:blue;"> 
      <p>blue</p> 
     </div> 
     <div class="col-sm-2" style="background-color:yellow;"> 
      <p>yellow</p> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Fiddle here