Pojemnik-płyn kontra pojemnik

Właśnie pobrałem 3.1 i znalazłem w dokumentach ...

Zmień dowolny układ siatki o stałej szerokości w układ o pełnej szerokości, zmieniając swój skrajny .containerna .container-fluid.

Przyglądając się bootstrap.css, wygląda na to, że .container-fluidjest identyczny .container. Oba mają ten sam CSS i każde wystąpienie .container-fluidjest sparowane .container, a wszystkie klasy kolumn są określone w procentach.

Kiedy kręciłem się z przykładami, nie widziałem żadnej różnicy, ponieważ wszystko wydawało się płynne.

Ponieważ jestem nowy w Bootstrap, zakładam, że coś mi brakuje. Czy ktoś może poświęcić chwilę i oświecić mnie?

Wersja szybka: .container ma jedną stałą szerokość dla każdego rozmiaru ekranu w bootstrap (xs, sm, md, lg); .container-fluidrozwija się, wypełniając dostępną szerokość.

Różnica między containeri container-fluidwynika z następujących linii CSS:

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

W zależności od szerokości rzutni, na której przeglądana jest strona, containerklasa nadaje jej div określoną stałą szerokość. Te linie nie istnieją w żadnej formie container-fluid, więc jego szerokość zmienia się za każdym razem, gdy zmienia się szerokość rzutni.

Załóżmy na przykład, że okno przeglądarki ma szerokość 1000 pikseli. Ponieważ jest większa niż minimalna szerokość 992 pikseli, twój .containerelement będzie miał szerokość 970 pikseli . Następnie powoli poszerzasz okno przeglądarki. Szerokość twojego .containerpliku nie zmieni się, dopóki nie osiągniesz 1200px, przy czym przeskoczy on do 1170px szerokości i pozostanie taki w przypadku większych szerokości przeglądarki.

.container-fluidZ drugiej strony Twój element będzie się stale zmieniać, gdy wprowadzasz nawet najmniejsze zmiany w szerokości przeglądarki.

Myślę, że mówisz, że containervs container-fluidto różnica między responsywnym a niereagującym na siatkę. To nie jest prawda ... chodzi o to, że szerokość nie jest stała ... jej pełna szerokość!

Trudno to wyjaśnić, więc spójrzmy na przykłady

Przykład pierwszy

container-fluid:

http://www.bootply.com/119981

Widzisz więc, jak kontener zajmuje cały ekran ... to jest container-fluid.

Teraz spójrzmy na drugą normalną containeri obejrzyj krawędzie podglądu

Przykład drugi

container

http://www.bootply.com/119982

Czy widzisz teraz białą przestrzeń w przykładzie? To dlatego, że ma stałą szerokość container! Bardziej sensowne może być otwarcie obu przykładów w dwóch różnych zakładkach i przełączanie się tam iz powrotem.

EDYTOWAĆ

Jeszcze lepiej, oto przykład z dwoma pojemnikami jednocześnie! Teraz możesz naprawdę odróżnić!

http://www.bootply.com/119983

Mam nadzieję, że pomogło to trochę wyjaśnić!

Zarówno .containeri .container-fluidreagują (tzn zmienić układ w oparciu o szerokości ekranu), ale na różne sposoby (wiem, nazewnictwo nie sprawiają, że dźwięk ten sposób).

Krótka odpowiedź:

.container to przeskakiwanie / niepewne zmiany rozmiaru, oraz

.container-fluid jest ciągła / dokładna zmiana rozmiaru przy szerokości: 100%.

Z perspektywy funkcjonalności:

.container-fluidstale zmienia rozmiar, zmieniając szerokość okna / przeglądarki o dowolną wartość, nie pozostawiając żadnych dodatkowych pustych miejsc po bokach, w przeciwieństwie do tego, jak to .containerrobi. (Stąd nazwa: „płyn” w przeciwieństwie do „cyfrowej”, „dyskretnej”, „fragmentowanej” lub „skwantowanej”).

.containerzmienia rozmiar na kawałki przy kilku określonych szerokościach. Innymi słowy, będą to różne określone aka „stałe” szerokości, różne zakresy szerokości ekranu.

Semantyka: „stała szerokość”

Możesz zobaczyć, jak mogą powstać pomyłki w nazewnictwie. Technicznie można powiedzieć, że .containerjest „stała szerokość”, ale jest ustalona tylko w tym sensie, że nie zmienia rozmiaru przy każdej szerokości granulek. W rzeczywistości nie jest „ustalony” w tym sensie, że zawsze pozostaje na określonej szerokości piksela, ponieważ w rzeczywistości może zmieniać rozmiar.

Z fundamentalnej perspektywy:

.container-fluidma właściwość CSS width: 100%;, więc stale dostosowuje się przy każdym stopniu szczegółowości ekranu.

.container-fluid {
  width: 100%;
}

.containerma coś w rodzaju „szerokość = 800px” (lub em, rem itp.), określoną wartość szerokości piksela przy różnych szerokościach ekranu. To oczywiście powoduje, że szerokość elementu gwałtownie przeskakuje na inną szerokość, gdy szerokość ekranu przekracza próg szerokości ekranu. Próg ten jest regulowany przez zapytania CSS3 o media, które pozwalają na zastosowanie różnych stylów dla różnych warunków, takich jak zakresy szerokości ekranu.

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

Poza

Możesz sprawić, by dowolny element o stałej szerokości odpowiadał za pomocą zapytań o media, a nie tylko .containerelementów, ponieważ zapytania o media są dokładnie .containerrealizowane przez bootstrap w tle (zobacz kod JKillian za odpowiedź).

Używaj, .container-fluidgdy chcesz, aby strona zmieniała kształty przy każdej drobnej różnicy w rozmiarze rzutni.

Użyj, .containergdy chcesz, aby strona zmieniała kształty tylko na 4 rodzaje rozmiarów , które są również znane jako „punkty przerwania”.

Punkty przerwania odpowiadające ich rozmiarom to:

• Bardzo mały: (tylko rozdzielczość mobilna)
• Mały: 768px (tablety)
• Średni: 992px (laptopy)
• Duży: 1200 pikseli (laptopy / komputery stacjonarne)

Zaktualizowano 2019

Podstawową różnicą jest to, że containerskaluje się responsywnie, podczas gdy container-fluidjest zawsze width:100%. Dlatego w głównych definicjach CSS wyglądają tak samo, ale jeśli spojrzysz dalej, zobaczysz, że .containerjest to związane z zapytaniami o media.

Bootstrap 4

containerMa 5 szerokościach ...

.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

containerMa 4 rozmiarach. Pełna szerokość na xsekranach, a następnie jej szerokość zmienia się w zależności od następujących zapytań o media.

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

Demo kontenera kontra pojemnik-płyn

.containerma maksymalną wartość piksela, natomiast .container-fluidmaksymalna szerokość to 100%.

.container-fluid stale zmienia rozmiar, zmieniając szerokość okna / przeglądarki o dowolną wartość.

.container zmienia się w porcje na kilku określonych szerokościach, kontrolowanych przez zapytania mediów (technicznie możemy powiedzieć, że to „stała szerokość”, ponieważ określone są wartości pikseli, ale jeśli się tam zatrzymasz, ludzie mogą odnieść wrażenie, że nie może zmienić rozmiaru - tj. nie reaguje .)

Z perspektywy wyświetlania .containerdaje większą kontrolę nad tym, co widzą użytkownicy, i ułatwia zobaczenie, co widzą użytkownicy, ponieważ masz tylko 4 warianty wyświetlania (5 w przypadku bootstrap 5), ponieważ rozmiary odnoszą się do takie same jak rozmiary siatki. np .col-xs, .col-sm, .col, i .col-lg.

Oznacza to, że podczas testowania przez użytkownika, jeśli testujesz na ekranach o 4 różnych rozmiarach, zobaczysz wszystkie wersje na wyświetlaczu.

Podczas używania, .container-fluidponieważ witdh jest związany z szerokością ekranu, wyświetlanie jest dynamiczne, więc różnice są znacznie większe, a użytkownicy z bardzo dużymi ekranami lub nietypowymi szerokościami ekranu mogą zobaczyć wyniki, których się nie spodziewałeś.

Masz rację w wersji 3.1 .container-fluid i .container są takie same i działają jak pojemnik, ale jeśli je usuniesz, działa jak .container-fluid (pełna szerokość). Usunęli .container-fluid dla „Mobile First Approach”, ale teraz powrócił do wersji 3.3.4 (i będą działać inaczej)

Aby uzyskać najnowszy bootstrap, przeczytaj ten post na stackoverflow, pomoże to sprawdzić .