Líquido contêiner vs recipiente

509

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?

FatFingers
fonte
4
Eu vi aquele. Foi postado algumas rotações atrás. o fluido do recipiente foi retirado para o 3.0 e adicionado novamente para o 3.1.
FatFingers 8/03/14
1
@Ranveer Definitivamente não é um duplicado como isso se refere a> BS3 que é BS2.3 - Desde essa pergunta não responde você poderia por favor, remova a futuros usuários não confunda
PW Kad
Nos documentos, o fluido cobre a largura de toda a janela de exibição. (ou é o de todo o contêiner atual ou o elemento que contém?) De qualquer forma, por que o nome fluido? O que é fluido em oposição ao recipiente não fluido?
Pashute

Respostas:

704

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.

JKillian
fonte
@jkillian Isso significa que se eu quiser criar um layout de largura total, devo usar .container-fluide .containerpara a largura da caixa, está certo?
Hung PD
1
@TheHung Depende exatamente o que você quer dizer com 'largura', mas container-fluidé o que eu iria para o seu caso, tanto quanto eu posso dizer
JKillian
@JKillian Como muitos temas hoje em dia, eles sempre têm 2 layouts: layout em caixa e amplo. Espero que você possa entender o que estou explicando. Desculpe pelo inglês ruim.
Hung PD
@JKillian Que tal usar .container e .container-fluid em alguns casos? Ex .: ( design.davidrozando.com/drew-html-v1.1/… ).
Brightweb
5
@JKillian Então, por que o fluido para contêiner é necessário?
177

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!

oueasley
fonte
o exemplo com os dois tipos de contêineres possui itens que mudam de largura.
ahnbizcad
6
Mesmo sabendo qual é a diferença, achei o exemplo "ambos" confuso por causa do sombreamento. Bifurquei seu código para fazer o que pode ser um exemplo mais claro para alguns: bootply.com/119983 (Além disso, o .row-fluid não é necessário no Bootstrap 3. Basta usar .row, se o seu contêiner é fluido ou não.)
Carl Bussema
Carl, seu link vai para o mesmo exemplo que o original. Se você ainda tem sua versão bifurcada, pode postar o link?
Mike T
6
Aqui está um bom exemplo de link de bifurcação , no caso de mais alguém encontrar isso no futuro.
Mike Collins
Obrigado Mike pelo outro exemplo, eles pareciam exatamente o mesmo no meu navegador.
22817 eric
169

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

ahnbizcad
fonte
1
não é o comportamento mais preciso para o .containerAdaptive em vez de Responsive?
ayjay
@ayjay você menciona um bom argumento. Ter termos para distinguir o redimensionamento contínuo versus o redimensionamento irregular seria útil.
ahnbizcad
1
O @ayjay Adaptive detecta o tipo de dispositivo que o cliente é e processa o servidor. O Responsive não se importa com o tipo de dispositivo que o cliente é; só se preocupa com a largura (devido a consultas de mídia). Como tal, responsivo é processado no lado do cliente (css, javascript). consulte huffingtonpost.com/garrett-goodman/… e amberweinberg.com/is-it-adaptive-or-responsive-web-design O IMO responsivo é muito mais fácil de manter e criar do que ter versões completamente diferentes do seu site para dispositivos diferentes. Mas o seu CSS precisa ser responsável por todos os navegadores.
ahnbizcad
@ajay Revisitando esta questão semântica de adaptativo vs responsivo ... uma vez que adaptativo significa que ele está detectando o dispositivo e emitindo diferentes html / css / js de acordo ... é possível que o html / css / js possa conter um estilo css de largura: 100% ;. e pode ser para qualquer dispositivo. Nesse caso, é tudo adaptável, mas ainda é redimensionado continuamente, em vez de abruptamente, em pedaços ... Portanto, não é semanticamente correto chamá-lo de adaptável vs responsivo #
ahnbizcad
24

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)
taimur alam
fonte
11

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

Zim
fonte
Isso não tem nada a ver com a pergunta. Informações legais, mas não relevantes aqui.
BeNice
Zim, ele estava perguntando qual era a DIFERENÇA entre .container-fluide .container. Essa era a informação que eu estava procurando. Sua informação é interessante, mas, quando eu vim procurando a resposta, realmente me confundiu por alguns minutos. Se ele foi listado APÓS as respostas que responderam à pergunta, isso seria ótimo, mas SO parece não nos deixar sugerir nossa própria ordem. E lendo meu comentário original, eu não estava tão claro quanto poderia ter sido. Anyhoo obrigado pela informação.
BeNice 21/06/19
Em suma, .containermuda largura de acordo com consultas de mídia e .container-fluidmudanças largura em tempo real (de acordo com a largura de vista-port)
Hassan Tareq
6

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

Sayali
fonte
Parece que o fluido geral do recipiente é melhor? Mais responsivo aos telefones móveis que é uma coisa enorme nos dias de hoje ...
5

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.

TrtlBoy
fonte
0

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 .

Deep
fonte