Contenitore di nidificazione all'interno di un bootstrap di un contenitore

Question

Ho un po 'di problemi a ottenere una risposta definitiva sui contenitori nel bootstrap. È chiaro che non devi annidare un numero .container all'interno di un numero .container-fluid e viceversa, ma è possibile nidificare uno .container all'interno di un altro .container? Sto cercando di creare un layout che abbia un div esterno che sarà a larghezza intera e un div interno che sarà più piccolo che contiene contenuto, una scatola in una scatola. Non sono sicuro di quale sia il modo corretto per farlo in bootstrap.

Answer 1

Sì, non nidificare mai all'interno di un contenitore.

Dal Bootstrap Documenti:

Contenitori

Bootstrap richiede un elemento che contiene per avvolgere contenuti del sito e casa il nostro sistema di griglia. Puoi scegliere uno dei due contenitori da utilizzare in i tuoi progetti. Si noti che, a causa del riempimento e altro, nessuno dei contenitori è nidificabile.

È possibile avvolgere la .container all'interno classe personalizzata .outer-container che ha il 100% di larghezza. Imposta una larghezza vicino al 75% quando le dimensioni dello schermo sono ridotte per mostrare che il contenitore interno ha una larghezza minore.

.outer-container { 
 
    background: tomato; 
 
    width: 100%; 
 
} 
 
.container { 
 
    background: lightblue; 
 
} 
 
@media (max-width: 1200px) { 
 
    .container { 
 
    width: 75%; 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="outer-container"> 
 
    <div class="container"> 
 
    I am fixed 
 
    </div> 
 
</div>