css - examples - layout bootstrap

¿Múltiples y/o anidados contenedores Bootstrap?

Question

Según entiendo, todos los elementos estilo Bootstrap deben existir dentro de un elemento <div class="container"> . Pero a veces veo ejemplos de Bootstrap donde hay varios "contenedores":

<div class="container">
    <!-- Blah, GUI stuff, blah -->
</div>

...

<div class="container">
    <!-- Blah, more GUI stuff, blah -->
</div>

Mis preguntas:

1. ¿Cuándo necesitarías una sola página HTML con múltiples "divs de contenedor"? ¿Qué beneficio ofrece esta oferta en lugar de simplemente colocar todo el cuerpo dentro de un gran "contenedor div"?
2. ¿Alguna vez desea anidar "contenedores div" dentro de otros? ¿Cuando por qué?

Answer 1

1. Algunas secciones de la página abarcarán todo el ancho de la ventana gráfica y otras no. Algunos fondos tendrán el ancho completo pero el contenido no.

   Un ejemplo de esto es un área de featurette que tiene una imagen de fondo o color que es el ancho completo de la ventana gráfica, pero el contenido dentro de eso, formularios o lo que sea, no exceda el .container en cualquier ancho de ventana dado.

2. Usted no anida .container o .container-fluid - vea los docs . No es necesario.

   Documentos: Bootstrap requiere un elemento contenedor para envolver los contenidos del sitio y alojar nuestro sistema de grillas. Puede elegir uno de los dos contenedores para usar en sus proyectos. Tenga en cuenta que, debido al relleno y más, ninguno de los contenedores se puede encajar [tampoco significa que el contenedor .container y .container-fluid NO se deben anidar].

Answer 2

A diferencia de lo que algunos han dicho, puede anidar un container-fluid dentro de un container . Incluso hay un ejemplo en el sitio web oficial de arranque:

http://getbootstrap.com/examples/navbar/

Answer 3

En realidad, depende totalmente de los requisitos del diseñador.

Algunas veces necesita ancho completo de la fila (me refiero a la ventana gráfica o una tira de la parte visible que puede lograr sin la clase de contenedor por separado)

http://binarytheme.com/demos?theme=bootsrap-landing-page-blue

ver el ejemplo de plantilla anterior para entender