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
.container
na.container-fluid
.
Przyglądając się bootstrap.css
, wygląda na to, że .container-fluid
jest identyczny .container
. Oba mają ten sam CSS i każde wystąpienie .container-fluid
jest 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?
twitter-bootstrap
twitter-bootstrap-3
FatFingers
źródło
źródło
Odpowiedzi:
Wersja szybka:
.container
ma jedną stałą szerokość dla każdego rozmiaru ekranu w bootstrap (xs, sm, md, lg);.container-fluid
rozwija się, wypełniając dostępną szerokość.Różnica między
container
icontainer-fluid
wynika z następujących linii CSS:W zależności od szerokości rzutni, na której przeglądana jest strona,
container
klasa nadaje jej div określoną stałą szerokość. Te linie nie istnieją w żadnej formiecontainer-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
.container
element będzie miał szerokość 970 pikseli . Następnie powoli poszerzasz okno przeglądarki. Szerokość twojego.container
pliku 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-fluid
Z drugiej strony Twój element będzie się stale zmieniać, gdy wprowadzasz nawet najmniejsze zmiany w szerokości przeglądarki.źródło
.container-fluid
i.container
dla szerokości pudełka, czy to prawda?container-fluid
to, o ile mogę powiedzieć, pójdę w twoim przypadkuMyślę, że mówisz, że
container
vscontainer-fluid
to 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ą
container
i obejrzyj krawędzie podgląduPrzykł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ć!
źródło
Zarówno
.container
i.container-fluid
reagują (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-fluid
stale 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.container
robi. (Stąd nazwa: „płyn” w przeciwieństwie do „cyfrowej”, „dyskretnej”, „fragmentowanej” lub „skwantowanej”)..container
zmienia 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
.container
jest „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-fluid
ma właściwość CSSwidth: 100%;
, więc stale dostosowuje się przy każdym stopniu szczegółowości ekranu..container
ma 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.Poza
Możesz sprawić, by dowolny element o stałej szerokości odpowiadał za pomocą zapytań o media, a nie tylko
.container
elementów, ponieważ zapytania o media są dokładnie.container
realizowane przez bootstrap w tle (zobacz kod JKillian za odpowiedź).źródło
.container
jest adaptacyjny w przeciwieństwie do responsywnego?Używaj,
.container-fluid
gdy chcesz, aby strona zmieniała kształty przy każdej drobnej różnicy w rozmiarze rzutni.Użyj,
.container
gdy 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:
źródło
Zaktualizowano 2019
Podstawową różnicą jest to, że
container
skaluje się responsywnie, podczas gdycontainer-fluid
jest zawszewidth:100%
. Dlatego w głównych definicjach CSS wyglądają tak samo, ale jeśli spojrzysz dalej, zobaczysz, że.container
jest to związane z zapytaniami o media.Bootstrap 4
container
Ma 5 szerokościach ...Bootstrap 3
container
Ma 4 rozmiarach. Pełna szerokość naxs
ekranach, a następnie jej szerokość zmienia się w zależności od następujących zapytań o media.Demo kontenera kontra pojemnik-płyn
źródło
.container-fluid
a.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ę..container
zmienia szerokość zgodnie z zapytaniami o media i.container-fluid
zmienia szerokość w czasie rzeczywistym (zgodnie z szerokością portu widoku).container
ma maksymalną wartość piksela, natomiast.container-fluid
maksymalna 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 .)źródło
Z perspektywy wyświetlania
.container
daje 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-fluid
ponieważ 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ś.źródło
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ć .
źródło