Elemento Bootstrap 100% de ancho

96

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:

http://i.imgur.com/aiEMJ.jpg

Actualmente:

http://i.imgur.com/3Sl27.jpg

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ó.

css twitter-bootstrap width usuario1589214
fuente
¿Podría incluir el código con el que está trabajando? Sin eso, todo lo que puedo decir es que debe asegurarse de que las etiquetas que contienen el div no tengan un ancho establecido que no sea 100%
Michael Peterson
Hola Michael, gracias por la respuesta. Aquí está la sección del código con la que estoy trabajando: <div class="container"> <div class="row"> <div class="span12"><img src="img/logo.png" width="960px"></center></div> <div class="block">content</div>
user1589214

Respuestas:

78

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>
Ross Allen
fuente
1
.row necesita un .contenedor o en este caso .container-fluid.
netAction
1
Si está utilizando la versión anterior de la hoja de estilo bootstrap, se container-fluidformará una barra de desplazamiento horizontal. Para arreglar esto, agregue esto a su hoja de estilo.container-fluid{ padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
Charlie
29

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.

JacobF
fuente
3
De hecho, parece que "ninguno de los contenedores es encajable" getbootstrap.com/css/#overview-container , así que espere algunos problemas aquí (pero creo que seguiré usando su solución).
Thibaut Barrère
Sin embargo, vale la pena señalar que la clase de fluido de contenedor no está disponible en bootstrap 3.0, pero está disponible en 3.1 y versiones posteriores
Dev
29

RESPUESTA RÁPIDA

  1. Utilice varios NOT NESTED .container s
  2. Envuelva los .containermensajes que desee que tengan un fondo de ancho completo en undiv
  3. 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:

  1. Hijo directo de un cuerpo
  2. 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/

jave.web
fuente
1
Esta respuesta es muy completa y firme en que anidar contenedores dentro de otros contenedores es una 'muy mala idea' (como 'cruzar los arroyos' malo en Ghostbusters) y señala una referencia del sitio web de Bootstrap que respalda esto. Incluir un contenedor dentro de un div simple es la sugerencia y el hecho de que Boostrap use esta técnica en su ejemplo de Jumbotron me dice que jave.web es el ganador de hoy.
Volksman
ese ejemplo de jumbotron eliminó todas mis preguntas.
Alexander Kim
A veces no es posible cerrar el contenedor y abrir un nuevo contenedor completo. La solución alternativa. ¡En la siguiente respuesta es mejor!
RubbelDeCatc
21

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;
}
benedex82
fuente
3
Esto se acerca mucho a una respuesta ideal que no requiere un cambio en el diseño general de la página y, a veces, será suficiente; sin embargo, existen problemas sutiles con las barras de desplazamiento. El .row-full llenará toda la ventana, ignorando las barras de desplazamiento, a diferencia de un contenedor-fluido que llenará toda la ventana con o sin las barras de desplazamiento dependiendo de si la barra de desplazamiento es opaca.
Typhlosaurus
Guau. Los js hicieron el truco, he estado buscando durante horas una solución. Mi problema es que el contenido se ingresa dentro de un cms y por lo tanto no se puede cambiar el html externo. Realmente me gustaría saber si hay una solución sin js.
drooh
6

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

Seb33300
fuente
2

En vez de 

style="width:100%"

intenta usar 

class="col-xs-12"

te ahorrará 1 personaje :)

Yevgeniy Afanasyev
fuente
Esta respuesta no es lo que pedía OP. Esto creará una columna que tenga el ancho completo del .containerdiv externo , pero que no sea el mismo que el ancho completo de la página en el navegador, que es lo que hace la pregunta.
Hartley Brody
No veo que OP haya solicitado el "ancho completo de la página en el navegador". Como lo entiendes
Yevgeniy Afanasyev
2

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

RubbelDeCatc
fuente
Con Bootstrap 4, esta es, con mucho, la mejor respuesta. ¡Salud!
Metro Smurf
1

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/

Michael Peterson
fuente
0

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.

Alisson
fuente
0

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


fuente
0

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

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.

Arash MAS
fuente