Elemento Bootstrap 100% de ancho

Question 1

Quiero crear bloques de colores 100% alternos. Una situación "ideal" se ilustra como un apego, así como la situación actual.

Configuración deseada:

Actualmente:

Mi primera idea fue crear una clase div, darle un color de fondo y darle un ancho del 100%.

.block {
    width: 100%;
    background: #fff;
}

Sin embargo, puede ver que esto obviamente no funciona. Está confinado a un área de contenedores. Intenté cerrar el contenedor y tampoco funcionó.

Question 2

La containerclase intencionalmente no es 100% de ancho. Tiene diferentes anchos fijos según el ancho de la ventana gráfica.

Si desea trabajar con todo el ancho de la pantalla, use .container-fluid:

Bootstrap 3:

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6"></div>
      <div class="col-lg-6"></div>
    </div>
    <div class="row">
      <div class="col-lg-8"></div>
      <div class="col-lg-4"></div>
    </div>
    <div class="row">
      <div class="col-lg-12"></div>
    </div>
  </div>
</body>

Bootstrap 2:

<body>
  <div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
  </div>
  <div class="row">
    <div class="span8"></div>
    <div class="span4"></div>
  </div>
  <div class="row">
    <div class="span12"></div>
  </div>
</body>

Question 3

Así es como puede lograr la configuración deseada con Bootstrap 3 :

<div class="container-fluid">
    <div class="row"> <!-- Give this div your desired background color -->
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    ... your content here ...
                </div>
            </div>
        </div>
    </div>
</div>

La container-fluidparte se asegura de que pueda cambiar el fondo en todo el ancho. La containerparte se asegura de que su contenido aún esté envuelto en un ancho fijo.

Este enfoque funciona, pero personalmente no me gusta todo el anidamiento. Sin embargo, no he encontrado una solución mejor hasta ahora.

Question 4

RESPUESTA RÁPIDA

Utilice varios NOT NESTED .container s
Envuelva los .containermensajes que desee que tengan un fondo de ancho completo en undiv
Agregue un fondo CSS al div de envoltura

Violines: Simple: https://jsfiddle.net/vLhc35k4/ , Bordes del contenedor: https://jsfiddle.net/vLhc35k4/1/
HTML:

<div class="container">
  <h2>Section 1</h2>
</div>
<div class="specialBackground">
  <div class="container">
    <h2>Section 2</h2>
  </div>
</div>

CSS: .specialBackground{ background-color: gold; /*replace with own background settings*/ }

INFORMACION ADICIONAL

NO UTILICE RECIPIENTES ANIDADOS

Mucha gente sugerirá ( erróneamente ) que debe utilizar contenedores anidados.
Bueno, NO deberías .
No se deben anidar. (Consulte la sección " Contenedores " en los documentos)

CÓMO FUNCIONA

dives un elemento de bloque, que de forma predeterminada abarca todo el ancho del cuerpo de un documento; existe la función de ancho completo. También tiene una altura de su contenido (si no especifica lo contrario).

No se requiere que los contenedores bootstrap sean hijos directos de un cuerpo, son solo contenedores con algo de relleno y posiblemente algunos anchos fijos variables de ancho de pantalla.

Si una cuadrícula básica .containertiene un ancho fijo, también se autocentra horizontalmente.
Entonces no hay diferencia si lo pones como:

Hijo directo de un cuerpo
Hijo directo de un básico div que es hijo directo de un cuerpo.

Por "básico" divme refiero a divque no tiene un CSS que altere su borde, relleno, dimensiones, posición o tamaño del contenido. Realmente solo un elemento HTML con display: block;CSS y posiblemente un fondo.
Pero, por supuesto, la configuración de CSS de tipo vertical (altura, padding-top, ...) no debería romper la cuadrícula de arranque :-)

Bootstrap en sí está utilizando el mismo enfoque

... En todo su propio sitio web y en su ejemplo "JUMBOTRON":
http://getbootstrap.com/examples/jumbotron/

Question 5

Hay una solución al utilizar vw. Es útil cuando no puede crear un nuevo recipiente de líquido. Esto, dentro de un div 'contenedor' clásico, será de tamaño completo.

.row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 left: 50%;
}

Después de esto está el problema de la barra lateral (gracias a @Typhlosaurus), resuelto con esta función js, llamándolo al cargar el documento y redimensionarlo:

function full_row_resize(){
    var body_width = $('body').width();
    $('.row-full').css('width', (body_width));
    $('.row-full').css('margin-left', ('-'+(body_width/2)+'px'));
    return false;
}

Question 6

En bootstrap 4, puede usar la clase 'w-100' (w como ancho y 100 como 100%)

Puede encontrar documentación aquí: https://getbootstrap.com/docs/4.0/utilities/sizing/

Question 7

Si no puede cambiar el diseño HTML:

.full-width {
    width: 100vw;
    margin-left: -50vw;
    left: 50%;
}

<div class="container">
  <div class="row">
    <div class="col-xs-12">a</div>
    <div class="col-xs-12">b</div>
    <div class="col-xs-12 full-width">c</div>
    <div class="col-xs-12">d</div>
  </div>
</div>

Demostración: http://www.bootply.com/tVkNyWJxA6

Question 8

En vez de

style="width:100%"

intenta usar

class="col-xs-12"

te ahorrará 1 personaje :)

Question 9

A veces no es posible cerrar el contenedor de contenido. La solución que estamos usando es un poco diferente, pero evita un desbordamiento debido al tamaño de la barra de desplazamiento de Firefox.

.full-width {
 margin-top: 15px;
 margin-bottom: 15px;
 position: relative;
 width: calc(100vw - 10px);
 margin-left: calc(-50vw + 5px);
 left: 50%;
}

Aquí hay un ejemplo: https://jsfiddle.net/RubbelDeKatz/wvt9253q

Question 10

Lo siento, debería haber pedido tu css también. Tal como está, básicamente lo que necesita mirar es darle a su div contenedor el estilo .container { width: 100%; }en su css y luego los divs adjuntos heredarán esto siempre que no les dé su propio ancho. También le faltaban algunas etiquetas de cierre, y se </center>cierra <center>sin que nunca se abra, al menos en esta sección del código. No estaba seguro de si querías la imagen en el mismo div que contiene tu contenido o por separado, así que creé dos ejemplos. Cambié el ancho de img a 100px simplemente porque jsfiddle ofrece un área de visualización pequeña. Avísame si no es lo que estás buscando.

contenido e imagen separados: http://jsfiddle.net/QvqKS/2/

contenido e imagen en el mismo div (img flotando a la izquierda): http://jsfiddle.net/QvqKS/3/

Question 11

Me preguntaría por qué alguien intentaría "anular" el ancho del contenedor, ya que su propósito es mantener su contenido con algo de relleno, pero tuve una situación similar (por eso quería compartir mi solución, aunque hay respuestas ).

En mi situación, quería tener todo el contenido (de todas las páginas) representado dentro de un contenedor, por lo que este era el fragmento de código de mi _Layout.cshtml:

<div id="body">

    @RenderSection("featured", required: false)

    <section class="content-wrapper main-content clear-fix">
        <div class="container">
            @RenderBody()
        </div>
    </section>
</div>

En mi página de índice de inicio, tenía una imagen de encabezado de fondo que me gustaría llenar todo el ancho de la pantalla , por lo que la solución fue hacer el Index.cshtml así:

@section featured {
<!-- This content will be rendered outside the "container div" -->
<div class="intro-header">
    <div class="container">SOME CONTENT WITH A NICE BACKGROUND</div>
</div>
}

<!-- The content below will be rendered INSIDE the "container div" -->
<div class="content-section-b">
    <div class="container">
        <div class="row">
          MORE CONTENT
        </div>
    </div>
</div>

Creo que esto es mejor que intentar hacer soluciones alternativas, ya que las secciones se crean con el propósito de permitir (o forzar) que las vistas reemplacen dinámicamente algunos contenidos en el diseño.

Question 12

Aunque la gente ha mencionado que necesitará usar .container-fluid en este caso, también tendrá que quitar el relleno de bootstrap.

Question 13

La siguiente respuesta no es exactamente óptima en ninguna medida, pero necesitaba algo que mantenga su posición dentro del contenedor mientras estira completamente el div interno.

https://jsfiddle.net/fah5axm5/

$(function() {
    $(window).on('load resize', ppaFullWidth);

    function ppaFullWidth() {
        var $elements = $('[data-ppa-full-width="true"]');
        $.each( $elements, function( key, item ) {
            var $el = $(this);
            var $container = $el.closest('.container');
            var margin = parseInt($container.css('margin-left'), 10);
            var padding = parseInt($container.css('padding-left'), 10)
            var offset = margin + padding;

            $el.css({
                position: "relative",
                left: -offset,
                "box-sizing": "border-box",
                width: $(window).width(),
                "padding-left": offset + "px",
                "padding-right": offset + "px"
            });
        });
    }
});

Question 14

Usaría dos div 'contenedor' separados como se muestra a continuación:

<div class="container">
   /* normal*/
</div>
<div class="container-fluid">
   /*full width container*/
</div>

Tenga en cuenta que el fluido del recipiente no sigue sus puntos de corte y es un recipiente de ancho completo.