css - container - div responsive bootstrap

Bootstrap Element 100% de ancho

Question

Quiero crear bloques alternados al 100% de colores. Una situación "ideal" se ilustra como un archivo adjunto, 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, puedes ver que esto obviamente no funciona. Está confinado a un área de contenedor. Traté de cerrar el contenedor y tampoco funcionó.

Answer 1

RESPUESTA RÁPIDA

1. Utilice múltiples .container NO .container
2. Envuelva esos .container s desea tener un fondo de ancho completo en un div
3. Agregue un fondo CSS al div de envoltura

Fiddles: Simple: https://jsfiddle.net/vLhc35k4/ , bordes de contenedores: 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*/ } .specialBackground{ background-color: gold; /*replace with own background settings*/ }

INFORMACION ADICIONAL

NO USE ENVASES NIDO

Mucha gente sugerirá ( erróneamente ) que debe usar contenedores anidados.
Bueno, no deberías.
No son para ser anidados. (Consulte la sección " getbootstrap.com/css/#overview-container " en los documentos)

CÓMO FUNCIONA

div es un elemento de bloque, que por defecto se extiende al ancho total del cuerpo de un documento; existe la función de ancho completo. También tiene un alto contenido (si no especificas lo contrario).

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

Si una cuadrícula básica .container tiene un ancho fijo, también se centra automáticamente en sentido horizontal.
Entonces, no hay diferencia si lo pones como:

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

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

Bootstrap en sí mismo está utilizando el mismo enfoque

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

Answer 2

Así es como puedes lograr tu 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 parte de container-fluid asegura que puede cambiar el fondo en todo el ancho. La parte del container 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, hasta ahora no he encontrado una mejor solución.

Answer 3

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

Answer 4

En lugar de

style="width:100%"

intenta usar

class="col-xs-12"

te salvará 1 personaje :)

Answer 5

Hay una solución usando vw. Es útil cuando no puede crear un nuevo contenedor de fluido. Esto, dentro de un div clásico ''contenedor'' 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 en carga de documento y cambio de tamaño:

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;
}

Answer 6

La clase de container no es intencionalmente del 100% de ancho. Es diferentes anchos fijos dependiendo del 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>

Answer 7

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"
            });
        });
    }
});

Answer 8

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

contenido e imagen por separado: http://jsfiddle.net/QvqKS/2/

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

Answer 9

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

En mi situación, quería que todo el contenido (de todas las páginas) se procesara dentro de un contenedor, así 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 la página de mi índice de inicio, tenía una imagen de encabezado de fondo que me gustaría llenar el ancho de la pantalla completa , por lo que la solución era hacer que 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 provisionales, ya que las secciones se crean con el objetivo de permitir (o forzar) vistas para reemplazar dinámicamente parte del contenido en el diseño.

Answer 10

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