Bootstrap: più righe annidate all'interno di una riga?

Question

So che è possibile annidare le righe all'interno di colonne annidate, ma è "contro le regole" per annidare le righe direttamente all'interno delle righe?

esempio:

<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> 

o mosto di questi essere sempre all'interno di colonne?

Answer 1

è "contro le regole" annidare le righe direttamente all'interno delle righe?

Non contro le regole in quanto tali, ma non una best practice secondo le linee guida.

Per bootstrap guidelines, third point under introduction -

..e solo le colonne possono essere figli diretti di righe"

* _{Edit:.. This is still true with Bootstrap 4.0 Beta Il link per la documentazione sopra reindirizza automaticamente alla versione 3.3 documentazione: grazie @Aakash per indicarlo.}

Ciò è dovuto al riempimento che Bootstrap utilizza per layout, è buona norma effettuare il nesting tramite il modello row-column-row, ovvero annidare una riga con una colonna attraverso il nodo.

Vedere la differenza nello snippet di seguito. Il primo set di markup interrompe il layout Bootstrap, sebbene non accada nulla di brutto.

<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>