Líquido contêiner vs recipiente

Acabei de baixar o 3.1 e encontrado nos documentos ...

Transforme qualquer layout de grade de largura fixa em um layout de largura total, alterando o mais externo .containerpara .container-fluid.

Olhando para dentro bootstrap.css, parece que .container-fluidé idêntico a .container. Ambos têm o mesmo CSS, e todas as instâncias de .container-fluidsão emparelhadas .containere todas as classes de coluna são especificadas em porcentagens.

Ao mexer nos exemplos, não pude ver nenhuma diferença, pois tudo parecia fluido.

Como sou iniciante no Bootstrap, presumo que esteja perdendo alguma coisa. Alguém poderia demorar um minuto e me esclarecer?

Versão rápida: .container possui uma largura fixa para cada tamanho de tela no bootstrap (xs, sm, md, lg); .container-fluidexpande para preencher a largura disponível.

A diferença entre containere container-fluidvem dessas linhas de CSS:

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

Dependendo da largura da janela de visualização em que a página da web está sendo visualizada, a containerclasse fornece a sua div uma largura fixa específica. Essas linhas não existem de nenhuma forma para container-fluid, portanto, sua largura muda toda vez que a largura da janela de visualização muda.

Por exemplo, digamos que a janela do seu navegador tenha 1000 px de largura. Como é maior que a largura mínima de 992 px, seu .containerelemento terá uma largura de 970 px. Você então aumenta lentamente a janela do navegador. A largura do seu .containerarquivo não será alterada até chegar a 1200 px, no qual ele passará para 1170 px de largura e permanecerá assim para larguras maiores do navegador.

.container-fluidPor outro lado, seu elemento será redimensionado à medida que você fizer as menores alterações na largura do navegador.

Eu acho que você está dizendo que um containervs container-fluidé a diferença entre responsivo e não responsivo à grade. Isso não é verdade ... o que está dizendo é que a largura não é fixa ... sua largura total!

Isso é difícil de explicar, então vamos ver os exemplos

Exemplo um

container-fluid:

http://www.bootply.com/119981

Então você vê como o contêiner ocupa a tela inteira ... isso é um container-fluid.

Agora vamos olhar para o outro apenas um normal containere observar as bordas da visualização

Exemplo dois

container

http://www.bootply.com/119982

Agora você vê o espaço em branco no exemplo? Isso porque é uma largura fixa container! Pode fazer mais sentido abrir os dois exemplos em duas guias diferentes e alternar entre eles.

EDITAR

Melhor ainda, aqui está um exemplo com os dois contêineres de uma só vez! Agora você pode realmente dizer a diferença!

http://www.bootply.com/119983

Espero que isso tenha ajudado a esclarecer um pouco!

Ambos .containere .container-fluidsão responsivos (ou seja, eles mudam o layout com base na largura da tela), mas de maneiras diferentes (eu sei, a nomeação não soa dessa maneira).

Resposta curta:

.container é redimensionamento irregular / irregular e

.container-fluid é redimensionamento contínuo / fino na largura: 100%.

Do ponto de vista da funcionalidade:

.container-fluidredimensiona continuamente à medida que você altera a largura da janela / navegador em qualquer quantidade, não deixando mais espaço vazio nas laterais, ao contrário de como .containerfaz. (Daí a nomeação: "fluido" em oposição a "digital", "discreto", "fragmentado" ou "quantizado").

.containerredimensiona em pedaços com várias larguras determinadas. Em outras palavras, serão diferentes específicos, também conhecidos como larguras "fixas", diferentes faixas de larguras da tela.

Semântica: "largura fixa"

Você pode ver como a confusão de nomes pode surgir. Tecnicamente, podemos dizer que .containeré "largura fixa", mas é fixada apenas no sentido de que não é redimensionada a cada largura granular. Na verdade, não é "fixo" no sentido de que sempre fica em uma largura de pixel específica, pois na verdade pode alterar o tamanho.

De uma perspectiva fundamental:

.container-fluidpossui a propriedade CSS width: 100%;, portanto, é reajustado continuamente a cada granularidade da largura da tela.

.container-fluid {
  width: 100%;
}

.containertem algo como "width = 800px" (ou em, rem etc.), um valor específico de largura de pixel em diferentes larguras de tela. É claro que é isso que faz com que a largura do elemento salte abruptamente para uma largura diferente quando a largura da tela ultrapassa um limite de largura da tela. E esse limite é regido pelas consultas de mídia CSS3, que permitem aplicar estilos diferentes para diferentes condições, como intervalos de largura da tela.

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

Você pode fazer com que qualquer elemento de largura fixa seja responsivo por meio de consultas de mídia, não apenas de .containerelementos, pois as consultas de mídia são exatamente como as .containerimplementadas pelo bootstrap em segundo plano (consulte a resposta de JKillian para o código).

Use .container-fluidquando quiser que sua página mude de forma com cada pequena diferença no tamanho da janela de exibição.

Use .containerquando quiser que sua página mude para apenas 4 tipos de tamanhos , também conhecidos como "pontos de interrupção".

Os pontos de interrupção correspondentes aos seus tamanhos são:

• Extra pequeno: (apenas resolução móvel)
• Pequeno: 768 px (tablets)
• Médio: 992 px (laptops)
• Grande: 1200 px (laptops / desktops)

Atualizado 2019

A diferença básica é que containeré dimensionado responsivamente, enquanto container-fluidé sempre width:100%. Portanto, nas definições de CSS raiz, elas parecem iguais, mas se você procurar mais, verá que.container está vinculado a consultas de mídia.

Bootstrap 4

O containertem 5 larguras ...

.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

O containertem 4 tamanhos. A largura total nas xstelas e a largura variam de acordo com as seguintes consultas de mídia.

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

demonstração de contêiner vs. fluido de contêiner

.containertem um valor de pixel de largura máxima, enquanto que .container-fluidé de largura máxima de 100%.

.container-fluid redimensiona continuamente à medida que você altera a largura da janela / navegador em qualquer valor.

.container redimensiona em pedaços com várias larguras determinadas, controladas por consultas de mídia (tecnicamente, podemos dizer que é "largura fixa" porque os valores de pixels são especificados, mas se você parar por aí, as pessoas terão a impressão de que não podem mudar de tamanho - ou seja, não respondem .)

De uma perspectiva de exibição, .containervocê tem mais controle sobre o que os usuários estão vendo e facilita a visualização do que os usuários verão, pois você tem apenas 4 variações de exibição (5 no caso do bootstrap 5) porque os tamanhos estão relacionados ao mesmo que os tamanhos da grade. por exemplo .col-xs, .col-sm, .col, e .col-lg.

O que isso significa é que, quando você está testando o usuário, se você testar em telas de 4 tamanhos diferentes, verá todas as verificações exibidas.

Ao usar .container-fluidporque o witdh está relacionado à largura da janela de exibição, a exibição é dinâmica, portanto as variações são muito maiores e os usuários com telas muito grandes ou larguras de tela incomuns podem ver resultados que você não esperava.

Você está certo em 3.1 .contêiner-líquido e .contêiner são iguais e funciona como contêiner, mas se você removê-los, funciona como .contêiner-líquido (largura total). Eles removeram o fluido .container para "Mobile First Approach", mas agora está de volta no 3.3.4 (e eles funcionarão de maneira diferente)

Para obter o bootstrap mais recente, leia esta postagem no stackoverflow, que ajudará a dar uma olhada .