¿Contenedores Bootstrap múltiples y / o anidados?

82

Tengo entendido que todos los elementos de estilo Bootstrap deben existir dentro de un <div class="container">elemento. 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:

¿Cuándo necesitaría una sola página HTML con múltiples "divs de contenedor"? ¿Qué beneficio ofrece esto en comparación con simplemente poner todo el cuerpo dentro de un gran "contenedor div"?
¿Alguna vez querría anidar "divs de contenedor" dentro de otros? ¿Cuando por qué?

css twitter-bootstrap

— smeeb
fuente

1

Si está utilizando un carrusel de ancho completo, tiene contenedores para los subtítulos, por lo que no debería estar en un contenedor. Por eso, podría tener un contenedor encima y un contenedor debajo.

— Aibrean

1

Si bien @Christina tiene razón en que los documentos dicen que no anida contenedores, a veces se usa y es útil. Consulte stackoverflow.com/questions/29660034/… para obtener información adicional sobre el anidamiento.

— gidmanma

80

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

Un ejemplo de esto es un área de featurette que tiene una imagen o color de fondo que es el ancho completo de la ventana gráfica, pero el contenido dentro de eso, formas o lo que sea, no excede el .container ancho de la ventana gráfica.
No anida .containero .container-fluid- ve el documentos . No es necesario.

Documentos: Bootstrap requiere un elemento contenedor para envolver el contenido del sitio y albergar nuestro sistema de cuadrícula. 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 es encajable [ninguno significa que .container y .container-fluid NO deben estar anidados].

— Christina
fuente

4

A menudo tengo un .container-fluidpara algo como la barra de navegación o un banner de algún tipo mientras que el sitio principal se encuentra dentro de un .container.

— DavidG

3

@DavidG Sí, y luego tienes doble relleno. Documentos: Bootstrap requiere un elemento contenedor para envolver el contenido del sitio y albergar nuestro sistema de cuadrícula. 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 es encajable. getbootstrap.com/css

— Christina

1

@DavidG. No uso .container-fluid a menos que el hijo inmediato sea .row y las columnas.

— Christina

1

Yo tampoco. Quise decir que tendría un contenedor de líquido con la barra de navegación para que sangrara por los bordes de la pantalla, luego, después de la etiqueta de cierre del contenedor, comenzaría un nuevo contenedor sin líquido con el contenido principal.

— DavidG

1

Hay que hacer una gran distinción aquí: tal vez no deberían anidarse directamente , pero pueden anidarse y, en algunos casos, deben anidarse . Digamos que tengo un div de panel acolchado dentro del contenedor principal que no es una fila o columna; en ese caso, necesito una .container-fluidclase que rodee mis filas / columnas dentro del panel; de lo contrario, obtendría una barra de desplazamiento horizontal (a menos que el desbordamiento dentro del panel esté oculto, pero es posible que no quiera eso, tal vez quiera una barra de desplazamiento si hay muchos datos dentro, tal vez una tabla ancha).

— jbyrd

17

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

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

— Poco a poco
fuente

1

En caso de que el contenido de ese enlace eventualmente cambie, es la versión 3.3 donde el ejemplo incluye un containeranidado a container-fluid: view-source: getbootstrap.com/docs/3.3/examples/navbar

— Ryan

6

En la sección Diseño de los documentos 4.3, https://getbootstrap.com/docs/4.3/layout/overview/#containers , ahora dice

Si bien los contenedores se pueden anidar, la mayoría de los diseños no requieren un contenedor anidado.

Solo tenga en cuenta lo que otros han dicho sobre el relleno, etc.

— Patrick McDonald
fuente

5

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

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

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

vea el ejemplo de plantilla anterior para comprender

— prueba
fuente

0

Ahorre tiempo y cambie a Css-grid, la cuadrícula CSS nativa.

Los contenedores Bootstrap tienen una limitación, si busca una limitación de 12 columnas, un desafío de relleno de 10 píxeles, agregando que no es nativo (CSS incorporado) donde el usuario debe descargarlo en su máquina, y además de todo eso, el número de inmersión que necesita procesar.

Con todo eso en mente, pruébalo y cambia a CSS-grid, aquí hay un buen campo de juego para comenzar.

Ahora, llegando a los contras de CSS-grid es que todavía no es compatible con IE.

— Feras
fuente