Elemento Bootstrap 100% di larghezza

Question 1

Voglio creare blocchi colorati alternati al 100%. Una situazione "ideale" è illustrata come attaccamento, così come la situazione attuale.

Configurazione desiderata:

Attualmente:

La mia prima idea è stata quella di creare una classe div, dargli un colore di sfondo e dargli il 100% di larghezza.

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

Tuttavia, puoi vedere che questo ovviamente non funziona. È limitato a un'area container. Ho provato a chiudere il contenitore e neanche quello ha funzionato.

Question 2

La containerclasse non è intenzionalmente larga al 100%. Sono diverse larghezze fisse a seconda della larghezza della finestra.

Se vuoi lavorare con l'intera larghezza dello schermo, usa .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

Ecco come ottenere la configurazione desiderata 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 si assicura che tu possa cambiare lo sfondo su tutta la larghezza. La containerparte si assicura che il contenuto sia ancora avvolto in una larghezza fissa.

Questo approccio funziona, ma personalmente non mi piace tutto il nesting. Tuttavia, finora non ho trovato una soluzione migliore.

Question 4

RISPOSTA RAPIDA

Uso multiplo NON NESTED .container s
Avvolgi .containeri messaggi che desideri avere uno sfondo a larghezza intera in un filediv
Aggiungi uno sfondo CSS al div di avvolgimento

Fiddles: semplici: https://jsfiddle.net/vLhc35k4/ , bordi del contenitore: 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*/ }

ULTERIORI INFORMAZIONI

NON USARE CONTENITORI NASCOSTI

Molte persone suggeriranno ( erroneamente ) che dovresti usare contenitori annidati.
Beh, NON dovresti .
Non devono essere annidati. (Vedere la sezione " Contenitori " nella documentazione)

COME FUNZIONA

divè un elemento blocco, che per impostazione predefinita si estende per l'intera larghezza del corpo di un documento - c'è la funzionalità a larghezza intera. Ha anche un'altezza del suo contenuto (se non specifichi diversamente).

I contenitori bootstrap non devono essere figli diretti di un corpo, sono solo contenitori con un po 'di imbottitura e possibilmente alcune larghezze fisse variabili di larghezza dello schermo.

Se una griglia di base .containerha una larghezza fissa, viene anche centrata automaticamente in orizzontale.
Quindi non c'è differenza se lo metti come:

Figlio diretto di un corpo
Figlio diretto di una base div che è figlio diretto di un corpo.

Con "base" divintendo divche non ha un CSS che altera il suo bordo, riempimento, dimensioni, posizione o dimensione del contenuto. Davvero solo un elemento HTML con display: block;CSS e possibilmente sfondo.
Ma ovviamente l'impostazione CSS verticale (altezza, padding-top, ...) non dovrebbe rompere la griglia di bootstrap :-)

Bootstrap stesso utilizza lo stesso approccio

... In tutto il suo sito web e nel suo esempio "JUMBOTRON":
http://getbootstrap.com/examples/jumbotron/

Question 5

C'è una soluzione alternativa usando vw. È utile quando non è possibile creare un nuovo contenitore di liquidi. Questo, all'interno di un classico div 'contenitore' sarà a grandezza naturale.

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

Dopo questo c'è il problema della barra laterale (grazie a @Typhlosaurus), risolto con questa funzione js, chiamandola al caricamento e ridimensionamento del documento:

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

In bootstrap 4, puoi usare la classe 'w-100' (w come larghezza e 100 come 100%)

Puoi trovare la documentazione qui: https://getbootstrap.com/docs/4.0/utilities/sizing/

Question 7

Se non puoi modificare il layout 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>

Demo: http://www.bootply.com/tVkNyWJxA6

Question 8

Invece di

style="width:100%"

prova a usare

class="col-xs-12"

ti salverà 1 personaggio :)

Question 9

A volte non è possibile chiudere il contenitore dei contenuti. La soluzione che stiamo usando è leggermente diversa ma evita un overflow a causa delle dimensioni della barra di scorrimento di Firefox!

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

Ecco un esempio: https://jsfiddle.net/RubbelDeKatz/wvt9253q

Question 10

Mi spiace, avrei dovuto chiedere anche il tuo css. Così com'è, in pratica quello che devi guardare è dare al tuo div contenitore lo stile .container { width: 100%; }nel tuo css e quindi i div inclusi lo erediteranno fintanto che non gli dai la propria larghezza. Ti mancavano anche alcuni tag di chiusura e </center>chiude un <center>senza che sia mai stato aperto, almeno in questa sezione di codice. Non ero sicuro se volessi l'immagine nello stesso div che contiene il tuo contenuto o separata, quindi ho creato due esempi. Ho cambiato la larghezza di img a 100px semplicemente perché jsfiddle offre una piccola area di visualizzazione. Fammi sapere se non è quello che stai cercando.

contenuto e immagine separati: http://jsfiddle.net/QvqKS/2/

contenuto e immagine nello stesso div (img float a sinistra): http://jsfiddle.net/QvqKS/3/

Question 11

Mi chiedo perché qualcuno provi a "sovrascrivere" la larghezza del contenitore, dal momento che il suo scopo è di mantenere il suo contenuto con un po 'di spaziatura interna, ma ho avuto una situazione simile (ecco perché ho voluto condividere la mia soluzione, anche se ci sono risposte ).

Nella mia situazione, volevo che tutti i contenuti (di tutte le pagine) fossero renderizzati all'interno di un contenitore, quindi questo era il pezzo di codice dal mio _Layout.cshtml:

<div id="body">

    @RenderSection("featured", required: false)

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

Nella mia pagina Home Index, avevo un'immagine di intestazione di sfondo che vorrei riempire l'intera larghezza dello schermo , quindi la soluzione era rendere Index.cshtml in questo modo:

@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>

Penso che sia meglio che cercare di fare soluzioni alternative, poiché le sezioni sono create con lo scopo di consentire (o forzare) le visualizzazioni a sostituire dinamicamente alcuni contenuti nel layout.

Question 12

Anche se le persone hanno detto che in questo caso dovrai usare .container-fluid, ma dovrai anche rimuovere l'imbottitura dal bootstrap.

Question 13

La seguente risposta non è esattamente ottimale in alcun modo, ma avevo bisogno di qualcosa che mantenga la sua posizione all'interno del contenitore mentre allunga completamente il 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

Vorrei utilizzare due div "contenitore" separati come di seguito:

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

Tieni presente che container-fluid non segue i tuoi punti di interruzione ed è un contenitore a larghezza intera.