Przerośnięty container w przykładzie z pierwszego odcinka Bootstrap.

Question

Hej!
Container ze skoczkami z pierwszego odcinka, w bootstrapie 5 jest szerszy niż ten na kursie. Da się go zmniejszyć?

Ten z oryginalnych plików kursu, przy pełnym oknie ma 1140x1271.38
Ten pisany przy bootstrapie 5, przy pełnym oknie (i identycznym kodzie) ma 1320 x 1447.19

Poniżej link do odpowiedniego momentu w filmie
https://youtu.be/Lvxy5GaArvo?t=3154

Comments

Podaj swój kod. Może Ci się wydawać, że kody są takie same, ale nie trudno o literówkę. Najlepiej całej strony, nie tylko docelowego elementu.

---

Dosłownie skopiowałem go teraz 1:1, nie przepisałem tylko faktycznie ctrl+c ctrl+v. Jedyne co się różni to pobrane ze strony bootstrapa biblioteki. Ja mam najnowszą, w kursie jest 11.09.2018. Czy ma sens gdzieś wrzucić Ci całe te foldery czy nie bardzo?

---

W takim razie nie ma sensu. Na Twoim miejscu przetestowałbym na szybko ten sam kod na wersji 4, czyli na takiej, której używał Pan Mirek.

---

Z podpiętymi starszymi bibliotekami faktycznie jest identycznie.
Najwyraźniej pozostało mi pogodzenie się z większym containerem i tyle.

---

Niekoniecznie. W bootstrap możesz manipulować szerokościami za pomocą różnych klas.

https://getbootstrap.com/docs/5.0/utilities/sizing/

https://getbootstrap.com/docs/5.0/layout/columns/

Answer 1

Ten z oryginalnych plików kursu, przy pełnym oknie ma 1140x1271.38
Ten pisany przy bootstrapie 5, przy pełnym oknie (i identycznym kodzie) ma 1320 x 1447.19

Bootstrap w swoich klasach odpowiadających za szerokość elementu używa zależności procentowych. Np. div z klasą .col-6 zajmie 50% szerokości okna przeglądarki. Więc może różnice wynikają z tego, że masz większy monitor (lub aktualną wielkość okna przeglądarki) niż Pan Mirosław na kursie?

Comments

Kod Pana Mirka pobrałem i odpalam go bezpośrednio u siebie, w identycznych warunkach jak swój własny. Dosłownie jedyna różnica między nimi to standard podpiętych bibliotek (Te z których korzysta strona pana Mirka pobrałem razem z jego kodem, z jego bloga. Te z których korzysta moja pobierałem bezpośrednio ze strony bootstrapa). Kody są 1:1 identyczne.

---

Tak jak mówiłem.

Załóżmy, że masz div z klasą col-6, więc będzie on zajmował 50% miejsca przeglądarki. Załóżmy również, że twoja przeglądarka zajmuje całe okno monitora.

Jeśli odpalisz tą stronę laptopie 15'', a na monitorze 30'' to w każdym z tych przypadków div będzie zajmował 50%, ale wartość w pikselach będzie 2x większa w przypadku dużego monitora. Wszystko zależy od rozdzielczościach w jakich operujesz.