È possibile nidificare i contenitori Bootstrap?

Question

Dalla documentazione in http://getbootstrap.com/css/

Si può scegliere uno dei due contenitori da utilizzare nei vostri progetti. Nota che, a causa del padding e altro, nessuno dei due container può essere nidificato.

e

trasformare qualsiasi larghezza fissa layout di griglia in un layout a tutta larghezza modificando tuo .container più esterno per .container fluido.

La seconda frase sembra implicare che è possibile disporre di contenitori nidificati. La prima frase sembra implicare che debba esserci un singolo contenitore e una pagina.

Quale è?

(Un caso potrebbe voler annidare un contenitore-fluido all'interno di un contenitore o semplicemente all'interno di un altro elemento con una larghezza fissa).

Answer 1

Lei ha ragione sulla capacità di utilizzare container-fluido

h4 { 
 
    margin-top: 25px; 
 
} 
 
.container { 
 
    border: solid 5px red; 
 
} 
 
.row { 
 
    margin-bottom: 20px; 
 
} 
 
.row .row { 
 
    margin-bottom: 0; 
 
} 
 
.nested-container { 
 
    border: solid 3px green; 
 
} 
 
.container-fluid { 
 
    border: solid 3px blue; 
 
} 
 
[class*="col-"] { 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
    background-color: #eee; 
 
    background-color: rgba(86, 61, 124, .15); 
 
    border: 1px solid #ddd; 
 
    border: 1px solid rgba(86, 61, 124, .2); 
 
} 
 
hr { 
 
    margin-top: 40px; 
 
    margin-bottom: 40px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> 
 
    <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> 
 
    <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-12"> 
 
     <div class="container-fluid"> 
 
     <div class="row"> 
 
      <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> 
 
      <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> 
 
      <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> 
 
     </div> 
 
     </div> 
 
     <div class="container nested-container"> 
 
     <div class="row"> 
 
      <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> 
 
      <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> 
 
      <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
</div>