Contenitore-fluido vs .contenitore

Appena scaricato 3.1 e trovato nei documenti ...

Trasforma qualsiasi layout di griglia a larghezza fissa in un layout a larghezza intera cambiando il più esterno .containerin .container-fluid.

Guardando dentro bootstrap.css, sembra .container-fluididentico a .container. Entrambi hanno lo stesso CSS e ogni istanza di .container-fluidè accoppiata .containere tutte le classi di colonne sono specificate in percentuale.

Quando giocherellavo con esempi non vedevo alcuna differenza, poiché tutto sembrava fluido.

Dato che sono nuovo di Bootstrap, presumo che mi manchi qualcosa. Qualcuno potrebbe prendersi un minuto e illuminarmi?

Versione rapida: .container ha una larghezza fissa per ogni dimensione dello schermo nel bootstrap (xs, sm, md, lg); .container-fluidsi espande per riempire la larghezza disponibile.

La differenza tra containere container-fluidderiva da queste righe di CSS:

@media (min-width: 568px) {
  .container {
    width: 550px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

A seconda della larghezza del viewport su cui viene visualizzata la pagina Web, la containerclasse dà al suo div una larghezza fissa specifica. Queste linee non esistono in nessuna forma per container-fluid, quindi la sua larghezza cambia ogni volta che cambia la larghezza della finestra.

Ad esempio, supponiamo che la finestra del browser sia larga 1000 px. Poiché è maggiore della larghezza minima di 992 px, il tuo.container elemento avrà una larghezza di . Quindi allarghi lentamente la finestra del browser. La larghezza del tuo .containernon cambierà fino a quando non arriverai a 1200 px, a cui salterà a 1170 px e rimarrà tale per qualsiasi larghezza del browser più grande.

Il tuo .container-fluidelemento, d'altra parte, si ridimensionerà costantemente mentre apporti anche le più piccole modifiche alla larghezza del tuo browser.

Penso che tu stia dicendo che un containervs container-fluidè la differenza tra reattivo e non reattivo alla griglia. Questo non è vero ... ciò che sta dicendo è che la larghezza non è fissa ... la sua larghezza completa!

Questo è difficile da spiegare, quindi diamo un'occhiata agli esempi

Esempio uno

container-fluid:

http://www.bootply.com/119981

Quindi vedi come il contenitore occupa l'intero schermo ... questo è un container-fluid .

Ora guardiamo l'altro semplicemente container e guardiamo i bordi dell'anteprima

Esempio due

container

http://www.bootply.com/119982

Ora vedi lo spazio bianco nell'esempio? Questo perché è una larghezza fissacontainer ! Potrebbe avere più senso aprire entrambi gli esempi in due diverse schede e passare da una parte all'altra.

MODIFICARE

Meglio ancora, ecco un esempio con entrambi i contenitori contemporaneamente! Ora puoi davvero dire la differenza!

http://www.bootply.com/119983

Spero che questo abbia contribuito a chiarire un po '!

Entrambi .containere .container-fluidsono reattivi (cioè cambiano il layout in base alla larghezza dello schermo), ma in diversi modi (lo so, la denominazione non la fa sembrare così).

Risposta breve:

.container è ridimensionamento instabile / discontinuo e

.container-fluid è ridimensionamento continuo / fine in larghezza: 100%.

Dal punto di vista della funzionalità:

.container-fluid si ridimensiona continuamente quando si modifica la larghezza della finestra / del browser di qualsiasi importo, senza lasciare spazio extra sui lati, a differenza di come .container funziona. (Da qui la denominazione: "fluido" in contrapposizione a "digitale", "discreto", "frammentato" o "quantizzato").

.containerridimensiona in blocchi a diverse larghezze determinate. In altre parole, si tratterà di specifiche larghezze "fisse", differenti intervalli di larghezza dello schermo.

Semantica: "larghezza fissa"

Puoi vedere come può sorgere la confusione nei nomi. Tecnicamente, possiamo dire che .containerè "larghezza fissa", ma è fissa solo nel senso che non si ridimensiona ad ogni larghezza granulare. In realtà non è "riparato", nel senso che rimane sempre a una larghezza di pixel specifica, dal momento che in realtà può cambiare dimensione.

Da una prospettiva fondamentale:

.container-fluidha la proprietà CSS width: 100%;, quindi si adatta continuamente ad ogni granularità della larghezza dello schermo.

.container-fluid {
  width: 100%;
}

.containerha qualcosa come "larghezza = 800 px" (o em, rem ecc.), un valore di larghezza pixel specifico a diverse larghezze dello schermo. Questo ovviamente è ciò che fa sì che la larghezza dell'elemento salti bruscamente a una larghezza diversa quando la larghezza dello schermo attraversa una soglia della larghezza dello schermo. E tale soglia è regolata da query multimediali CSS3, che consentono di applicare stili diversi per condizioni diverse, ad esempio intervalli di larghezza dello schermo.

@media screen and (max-width: 400px){
  .container {
    width: 123px;
  }
}
@media screen and (min-width: 401px) and (max-width: 800px){

  .container {
    width: 456px;
  }
}
@media screen and (min-width: 801px){
  .container {
    width: 789px;
  }
}

Al di là

È possibile rendere reattivo qualsiasi elemento a larghezze fisse tramite media query, non solo .containerelementi, poiché le media query sono esattamente come .containervengono implementate da bootstrap in background (vedere la risposta di JKillian per il codice).

Utilizzare .container-fluidquando si desidera che la pagina venga modificata con ogni piccola differenza nelle dimensioni della finestra.

Utilizzare .containerquando si desidera che la pagina si modifichi solo di 4 tipi di dimensioni , noti anche come "punti di interruzione".

I punti di interruzione corrispondenti alle loro dimensioni sono:

• Extra piccolo: (solo risoluzione mobile)
• Piccolo: 768 px (compresse)
• Medio: 992 px (laptop)
• Grande: 1200 px (laptop / desktop)

Aggiornato 2019

La differenza di base è che containersi ridimensiona in modo reattivo, mentre lo container-fluidè sempre width:100%. Pertanto, nelle definizioni CSS radice, appaiono uguali, ma se guardi oltre vedrai che .containerè associato alle query multimediali.

Bootstrap 4

L' containerha 5 larghezze ...

.container {
  width: 100%;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

Bootstrap 3

L' containerha 4 dimensioni. La larghezza completa sugli xsschermi, quindi la larghezza varia in base alle seguenti query multimediali.

    @media (min-width: 1200px) {
        .container {
            width: 1170px;
        }
    }
    @media (min-width: 992px) {
        .container {
            width: 970px;
        }
    }
    @media (min-width: 768px) {
        .container {
            width: 750px;
        }
    }

demo container-container-fluid

.containerha un valore pixel di larghezza massima, mentre .container-fluidè larghezza massima 100%.

.container-fluid si ridimensiona continuamente mentre si modifica la larghezza della finestra / del browser di qualsiasi importo.

.container ridimensiona in blocchi a diverse larghezze determinate, controllato da query multimediali (tecnicamente possiamo dire che è "larghezza fissa" perché sono specificati i valori dei pixel, ma se ti fermi lì, le persone potrebbero avere l'impressione che non possa cambiare dimensione - cioè non reattivo .)

Dal punto di vista del display .containerti dà più controllo su ciò che gli utenti stanno vedendo e rende più facile vedere ciò che gli utenti vedranno in quanto hai solo 4 varianti di display (5 nel caso del bootstrap 5) perché le dimensioni si riferiscono al uguale alle dimensioni della griglia. ad esempio .col-xs, .col-sm, .cole .col-lg.

Ciò significa che quando si esegue il test utente se si esegue un test su display con 4 dimensioni diverse, vengono visualizzate tutte le verifiche sul display.

Quando viene utilizzato .container-fluidperché witdh è correlato alla larghezza della finestra, il display è dinamico, quindi le varianti sono molto più grandi e gli utenti con schermi molto grandi o larghezze dello schermo non comuni possono vedere risultati che non ti aspettavi.

Hai ragione in 3.1 .container-fluid e .container sono uguali e funzionano come un contenitore, ma se li rimuovi funziona come .container-fluid (larghezza intera). Hanno rimosso .container-fluid per "Mobile First Approach", ma ora è tornato in 3.3.4 (e funzioneranno in modo diverso)

Per ottenere il bootstrap più recente, leggi questo post su StackOverflow che ti aiuterà a verificarlo .