Bootstrap: Wiele zagnieżdżonych rzędów w rzędzie?

Question

Wiem, że można zagnieżdżać wiersze w kolumnach zagnieżdżonych, ale czy jest to "sprzeczne z regułami", aby zagnieżdżać wiersze bezpośrednio w wierszach?

np

<div class="row"> 

    <div class="row"> 
    cols in here 
    </div> 

    <div class="row"> 
    cols in here 
    </div> 

    <div class="row"> 
    cols in here 
    </div> 

</div> 

Albo musi to być zawsze w kolumnach?

Answer 1

czy to "wbrew zasadom" zagnieżdżanie rzędów bezpośrednio w rzędach?

Nie wbrew zasadom jako takich, ale nie najlepsze praktyki zgodnie z wytycznymi.

Per bootstrap guidelines, third point under introduction -

..i tylko kolumny mogą być natychmiastowe dzieci wierszy”

* _{Edycja:.. This is still true with Bootstrap 4.0 Beta Link do docs powyżej automatycznie przekierowywać do wersji 3.3 Dokumentacja: dziękuję @Aakash za wskazanie tego}

Wynika to z wyściółki, której używa Bootstrap dla swojej układ, dobrą praktyką jest zagnieżdżanie poprzez wzór row-column-row, tj. zagnieżdżanie wiersza z jedną kolumną w poprzek.

Zobacz różnicę w poniższym fragmencie. Pierwszy zestaw znaczników łamie układ Bootstrap, chociaż nic złego się nie dzieje.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="row"> 
 
     <div class="col-xs-6">One</div> 
 
     <div class="col-xs-6">Two</div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<hr> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12"> 
 
     <div class="row"> 
 
     <div class="col-xs-6">One</div> 
 
     <div class="col-xs-6">Two</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<hr> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12">One</div> 
 
    <div class="col-xs-12">Two</div> 
 
    <div class="col-xs-12">Three</div> 
 
    </div> 
 
</div>