Pojemnik-płyn kontra pojemnik

509

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?

FatFingers
źródło
4
Widziałem to. Został opublikowany kilka obrotów wstecz. płyn-pojemnik został pobrany dla 3.0 i dodany ponownie dla 3.1.
FatFingers
1
@Ranveer Zdecydowanie nie jest duplikatem, ponieważ odnosi się do> BS3, czyli BS2.3 - Skoro na to pytanie nie ma odpowiedzi, czy możesz usunąć, aby nie pomylić przyszłych użytkowników
PW Kad
Z dokumentacji płyn pokrywa szerokość całej rzutni. (czy jest to cały aktualny pojemnik czy zawiera element?) W każdym razie, dlaczego nazwa płynu? Czym jest płyn w przeciwieństwie do pojemnika niepłynnego?
pashute

Odpowiedzi:

704

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.

JKillian
źródło
@jkillian To znaczy, że jeśli chcę zbudować układ o pełnej szerokości, powinienem użyć .container-fluidi .containerdla szerokości pudełka, czy to prawda?
Hung PD
1
@ TheHung Zależy dokładnie, co masz na myśli przez „pełną szerokość”, ale o container-fluidto, o ile mogę powiedzieć, pójdę w twoim przypadku
JKillian,
@JKillian Obecnie wiele motywów ma zawsze 2 układy: pudełkowy i szeroki. Mam nadzieję, że zrozumiesz, co wyjaśniam. Przepraszam, za słaby angielski.
Hung PD
@JKillian Co powiesz na użycie .container i .container-fluid w niektórych przypadkach? Np .: ( design.davidrozando.com/drew-html-v1.1/… ).
Brightweb,
5
@JKillian Dlaczego więc płyn w pojemniku jest nawet potrzebny?
177

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ć!

oueasley
źródło
przykład z obydwoma typami kontenerów zawiera elementy, które zmieniają szerokość.
ahnbizcad
6
Nawet wiedząc, jaka jest różnica, uznałem, że „oba” przykłady są mylące z powodu zacienienia. Rozwidliłem twój kod, aby zrobić coś, co może być jaśniejszym przykładem dla niektórych: bootply.com/119983 (Ponadto, .row-fluid nie jest potrzebny w Bootstrap 3. Po prostu użyj .row, czy twój kontener jest płynny czy nie.)
Carl Bussema
Carl, twój link prowadzi do tego samego przykładu co oryginał. Jeśli nadal masz wersję rozwidloną, czy możesz opublikować link?
Mike T
6
Oto dobry przykładowy link do widelca , na wypadek, gdyby ktokolwiek inny wpadł na to w przyszłości.
Mike Collins
Dzięki Mike'owi drugi przykład wyglądali dokładnie tak samo w mojej przeglądarce.
eric
169

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

ahnbizcad
źródło
1
czy nie jest bardziej dokładne zachowanie, ponieważ .containerjest adaptacyjny w przeciwieństwie do responsywnego?
ayjay,
@ayjay przywołujesz dobry punkt. Przydałyby się terminy pozwalające rozróżnić ciągłe zmiany rozmiaru od przeskakiwania zmiany rozmiaru.
ahnbizcad
1
@ayjay Adaptive wykrywa typ urządzenia, którym jest klient, i renderuje rzeczy po stronie serwera. Responsive nie obchodzi, jakiego typu urządzeniem jest klient; dba tylko o szerokość (z powodu zapytań o media). W związku z tym responsywny jest renderowany po stronie klienta (css, javascript). zobacz huffingtonpost.com/garrett-goodman/... i amberweinberg.com/is-it-adaptive-or-responsive-web-design Responsywne IMO jest znacznie łatwiejsze w utrzymaniu i budowie niż posiadanie całkowicie różnych wersji witryny dla różnych urządzeń. Ale Twój CSS musi uwzględniać wszystkie przeglądarki.
ahnbizcad
@ajay Powracając do tego semantycznego pytania adaptacyjnego vs. responsywnego ... ponieważ adaptacyjny oznacza, że ​​wykrywa urządzenie i odpowiednio wyrzuca różne pliki HTML / css / js ... możliwe jest, że html / css / js może zawierać styl css o szerokości: 100% i może być dla każdego urządzenia. W takim przypadku wszystko jest adaptacyjne, ale ciągle zmienia rozmiar w sposób ciągły, a nie gwałtowny w kawałkach ... Dlatego nie jest poprawne semantycznie nazywanie go adaptacyjnym vs. responsywnym
ahnbizcad
24

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)
taimur alam
źródło
11

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

Zim
źródło
To nie ma nic wspólnego z pytaniem. Ładne informacje, ale nie istotne tutaj.
BeNice
Zim zapytał, jaka jest RÓŻNICA między .container-fluida .container. To była informacja, której szukałem. Twoje informacje są interesujące, ale kiedy przyszedłem poszukać odpowiedzi, naprawdę wprawiły mnie w zakłopotanie na kilka minut. Jeśli byłby wymieniony PO odpowiedziach, które odpowiedziałyby na pytanie, które byłyby świetne, ale SO nie wydaje się sugerować naszego własnego zamówienia. I czytając mój oryginalny komentarz, nie byłem tak jasny, jak mogłem. Anyhoo dzięki za informację.
BeNice
Krótko mówiąc, .containerzmienia szerokość zgodnie z zapytaniami o media i .container-fluidzmienia szerokość w czasie rzeczywistym (zgodnie z szerokością portu widoku)
Hassan Tareq
6

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

Sayali
źródło
Wygląda na to, że ogólny płyn-pojemnik jest lepszy? Bardziej reaguje na telefony komórkowe, co jest dziś ogromną sprawą ...
5

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

TrtlBoy
źródło
0

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

Głęboki
źródło