Dlaczego Bootstrap 3 wymusza szerokość kontenera na określone rozmiary?

Jeśli moja przeglądarka ma rozmiar 992px, wtedy .container ma maksymalną szerokość 970 pikseli. Jeśli moja przeglądarka ma rozmiar 991 pikseli, wtedy .container ma maksymalną szerokość 750 pikseli. Dlaczego istnieje taki duży skok w maksymalnej szerokości? Dlaczego po prostu nie ma maksymalnej szerokości 1170px z 20-procentowym marginesem na każdej stronie lub czymś tak, że podczas zmiany rozmiaru okna przeglądarki szerokość kontenera zmienia się płynnie zamiast dużego skoku?Dlaczego Bootstrap 3 wymusza szerokość kontenera na określone rozmiary?

E.g. przy szerokości ekranu 992px mam tylko bardzo mały margines z każdej strony (11px). Jednak przy szerokości 991px mam 120px marginesu z każdej strony, co oznacza, że prawie 25% powierzchni ekranu to pusty margines po bokach. To nie ma dla mnie większego sensu. Czy jest jakiś powód, aby to zrobić? Czy mogę usunąć to zachowanie preferując określone szerokości kontenera bez łamania rzeczy?

Źródło

2013-10-16 Ben McCann

Czy [to powiązane] (http://stackoverflow.com/questions/9780333/fluid-or-fixed-grid-system-in-responsive-design-based-on-twitter-bootstrap)? To brzmi jak ten sam problem dla mnie. –

Nie jest to ważne, ponieważ trudno jest znaleźć urządzenie o szerokości ekranu 992px/991px, CSS ustawiono na typową szerokość urządzenia, taką jak iPad lub smartfony. Oczywiście można zamienić oryginał na własny CSS, aby pasował do szerokości przeglądarki (przeciąganie), ale to, co zrobiłeś, nie wpłynie na sposób ich działania w urządzeniach typu pad/smartfon. – Kooki3

Zgadzam się, że trudno jest znaleźć urządzenie o szerokości ekranu 992px/991px, ale można uzyskać większą rozdzielczość ekranu i zmaksymalizować jego przeglądarkę, aby nieco łatwiej było napotkać tę sytuację. –

Oficjalna odpowiedź od ludzi Bootstrap:

Co sprowadza się do tego, że projektując dla konkretnych pułapki jest łatwiejszy (w myślach) niż projektowanie nieograniczone, nieznanych rozmiarach. Wspomniana przez ciebie alternatywa nie jest zła ani zła, tylko inna. Wolę utrzymywać poziomy z bardzo specyficznymi zakresami

Źródło

2013-10-17 23:14:03

+22

Mam '.container {width: auto; } ', aby naprawić, że – Dorian

+20

http://getbootstrap.com/css/#grid-options Przekształć układ siatki o stałej szerokości w układ o pełnej szerokości, zmieniając najbardziej zewnętrzny .container na .container-fluid. – chilltemp

To nie zmieni prawego marginesu – user3799365

W ten sposób działa Bootstrap i jego sieci. Bootstrap definiuje 4 siatki, patrz this table. W zależności od wielkości ekranu zostanie użyta jedna z tych czterech siatek. Szerokość ekranu 992px jest punktem przerwania między małą i średnią siatką.

Siatki pasują w poziomie i przewijają w pionie as we are used to. Z tego powodu mniejsza siatka zostanie zastosowana poniżej 992 pikseli.

Maksymalną szerokość kontenera można "obliczyć", znajdując szerokość, która może zawierać 12 kolumn o równej szerokości oraz wszelkie rynny. Dla małej siatki 12 x 60 tworzy 720. The padding is constructed z 15 pikseli po obu stronach kolumny, minus 2 x 15 pikseli na zewnętrznej stronie siatki. Te brakujące piksele (zbudowane z ujemnym marginesem) sprawiają, że 720 + (2 x 15) = 750.

750 px wydaje się bardzo mały w stosunku do 991px, o którym wspomniałeś. Mała siatka jest przeznaczona do użytku na urządzeniach o szerokości ekranu 768px i średnich siatkach o szerokości ekranu 992px.

Źródło

2013-10-16 19:14:04

Dzieje się tak, ponieważ stała szerokość + margines = punkt przerwania. Podczas ładowania początkowego margines rośnie, gdy pojemnik pozostaje na stałej szerokości. Gdy przeglądarka ma rozmiar większy od poprzedniego punktu przerwania, kontener przeskakuje tuż poniżej punktu przerwania.

Źródło

2014-03-19 02:47:48 c0d3fall

Dlaczego Bootstrap 3 wymusza szerokość kontenera na określone rozmiary?

Odpowiedz

Powiązane problemy