Annidamento di una classe contenitore all'interno di una classe container-fluid in Bootstrap 3?

Question

Oltre al problema del riempimento, perché non è consigliabile nidificare .container in .container-fluid?

Se azzerate il riempimento del contenitore figlio (come mostrato nel mio codice di seguito), l'effetto è lo stesso di avere comunque un contenitore. Inoltre, sembra che avere diversi layout di larghezza piena e fissa sia piuttosto comune in questi giorni. So cosa dice la documentazione (LINK), ma sono curioso di sapere se qualcuno sa qualcosa di diverso dal problema del padding che garantisce che questa implementazione non sia raccomandata. È il markup addizionale o qualcos'altro che mi manca?

Il motivo per cui lo chiedo è che l'ho implementato su un certo numero di siti di recente e non ho riscontrato alcun problema apparente nei test che ho fatto. Mi chiedo se ci siano altri potenziali problemi in agguato che sarebbe motivo per me di prendere in considerazione l'interruzione di questa pratica.

CSS

.container-fluid .container { 
    padding-left:0; 
    padding-right:0; 
} 

HTML

<div class="container-fluid" style="background-color:aliceblue;"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-xs-6" style="background-color:violet">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div> 
        <div class="col-xs-6" style="background-color: lightblue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-4" style="background-color:pink">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div> 
     <div class="col-xs-4" style="background-color: red">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div> 
     <div class="col-xs-4" style="background-color:blue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div> 
    </div> 
</div> 

Example on Bootply

Answer 1

Dopo la ricerca di questo problema, penso di avere una buona risposta a questa domanda. Sulla base di ciò che ho trovato, sembra che lo Bootstrap documentation e lo examples on the Bootstrap website contraddicono la raccomandazione che le classi contenitore non possono essere nidificate. Questo è acknowledged nel repository pure. Sembra quindi che la raccomandazione nella documentazione sui contenitori di nidificazione e il conseguente problema di padding causato dai contenitori nidificati sia l'unica vera preoccupazione per questo problema, in quanto non ho riscontrato altri problemi.

Nel repository ho trovato un altro potential solution che consigliava di alterare i margini sui contenitori nidificati. Ma penso che la mia soluzione di azzerare il riempimento del contenitore del bambino, come delineato in questa domanda iniziale, sia un po 'più pratico e diretto poiché non è necessario alcun markup addizionale per ottenere l'effetto desiderato. Includerò la soluzione dei margini dal repository qui per riferimento. Fondamentalmente implica l'aggiunta di una classe fissa al contenitore padre, quindi l'applicazione di margini negativi sinistro e destro su ogni contenitore nidificato all'interno del genitore. Si noti che questa soluzione non si applica alle istanze di contenitori nidificati in container-fluid. Solo per contenitori annidati in altri contenitori.

---

contenitori inseriti IN CONTENITORI

HTML

<div class="container fixed"> 
    <div class="container"> 
    <div class="container"> 
     <div class="container"></div> 
    </div> 
    </div> 
</div> 

CSS

.container.fixed .container { 
    margin-left: -15px; 
    margin-right: -15px; 
} 

Example on Bootply

---

contenitori inseriti IN CONTAINER-FLUID

CSS

.container-fluid .container { 
    padding-left:0; 
    padding-right:0; 
} 

HTML

<div class="container-fluid" style="background-color:aliceblue;"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-xs-6" style="background-color:violet">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div> 
        <div class="col-xs-6" style="background-color: lightblue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-4" style="background-color:pink">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div> 
     <div class="col-xs-4" style="background-color: red">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div> 
     <div class="col-xs-4" style="background-color:blue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div> 
    </div> 
</div> 

Example on Bootply

---

Per concludere, anche se non è consigliabile, è facilmente possibile contenitori nido e nel contesto destro, ha può effettivamente essere utile, ad esempio nei casi in cui un layout presenta varie fissi e contenuti di grande ampiezza. Ma devono essere fatte attente considerazioni e aggiustamenti per tener conto del problema di imbottitura che deriva dai contenitori di nidificazione.