Ustawianie maksymalnej szerokości ciała za pomocą Bootstrap

Budowanie mojej pierwszej strony z Twitter Bootstrap i eksperymentowanie z płynnymi układami. Ustawiłem mój kontener na płynny, teraz zawartość wewnątrz zajmuje pełną szerokość strony i dostosowuje się jako zmiana rozmiaru przeglądarki.

Projekt, nad którym pracuję został stworzony dla maksymalnej szerokości ~950px.

Sprawdziłem variables.less i responsive.less, a dokumentacja Bootstrap, Nie wiem jak to zrobić. Próbowałem też dodać do mojego style.css: 

body {
    max-width: 950px;
}
Author: lorem monkey, 2012-03-16
Source

5 answers

Edit

Lepszym sposobem na to jest

  1. Utwórz własny plik less jako główny plik less (jak bootstrap.mniej).

  2. Importuj wszystkie potrzebne pliki bez bootstrap. (w tym przypadku wystarczy zaimportować wszystkie pliki responsive less, ale responsive-1200px-min.mniej)

  3. Jeśli chcesz zmodyfikować cokolwiek w oryginalnym pliku Bootstrap less, wystarczy, że napiszesz swój własny less, aby nadpisać kod less bootstrap. (Tylko pamiętaj, aby umieścić Twój mniej kod / plik po @ import {Bootstrap ' s less file};).

Oryginalny

Mam ten sam problem. Tak to naprawiłem.

Znajdź Zapytanie o media.

@media (max-width:1200px) ...

Usuń to. (Chodzi mi o całość, nie tylko @media (max-width:1200px))

Ponieważ domyślna szerokość Bootstrap to 940px, nie musisz nic robić.

Jeśli chcesz mieć własną max-width, po prostu zmodyfikuj regułę css w zapytaniu media, która pasuje do żądanej szerokości.

 25
Author: maxisam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-18 17:39:52

Nie musisz modyfikować Bootstrap-responsive usuwając @media (max-width:1200px)...

Moja aplikacja ma max-width 1600px. Oto jak to u mnie działało:

  1. Utwórz bootstrap-custom.css-jak najbardziej, Nie chcę nadpisywać mojego oryginalnego css bootstrap.

  2. Wewnątrz bootstrap-custom.css, override the container-fluid by including this code:

Tak: 

/* set a max-width for horizontal fluid layout and make it centered */
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  max-width: 1600px; /* or 950px */
}
 158
Author: jcg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-15 13:38:39

W odpowiedzi.mniej, możesz skomentować linię, która importuje responsive-1200px-min.mniej.

// Large desktops

@import "responsive-1200px-min.less";

Like so: 

// Large desktops

// @import "responsive-1200px-min.less";
 9
Author: Henry,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-27 12:31:49

Niestety żadne z powyższych nie rozwiązało problemu dla mnie.

Nie chciałem edytować Bootstrap-responsywny.css więc poszedłem łatwą drogą:
  1. Utwórz css z priorytetem nad reagującym na bootstrap.css
  2. Skopiuj całą zawartość @media (min-width: 768px) and (max-width: 979px) (linia 461 z najnowszą wersją bootstrap 2.3.1 od dziś)
  3. wklej go do css o wysokim priorytecie
  4. w css umieść @media (min-width: 979px) w miejscu, gdzie było napisane @media (min-width: 768px) and (max-width: 979px) wcześniej. To ustawia styl od 768 do 979 do wszystkiego powyżej 768.
To wszystko. Nie jest optymalny, będziesz miał zduplikowany css, ale działa w 100% idealnie!
 2
Author: chech,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-11 00:47:42

Nie wiem, czy to było tutaj zaznaczone. Ustawienia dla .container width muszą być ustawione na stronie Bootstrap. Osobiście nie musiałem edytować ani dotykać niczego w plikach CSS, aby dostroić mój rozmiar .container, który wynosi 1600px. W zakładce Dostosuj znajdują się trzy sekcje odpowiedzialne za media i responsywność sieci:]}

  • Media queries breakpoints
  • System siatki
  • rozmiary pojemników

Poza tym Media queries breakpoints, do których, jak sądzę, odnosi się większość ludzi, zmieniłem również @container-desktop na (1130px + @grid-gutter-width) i @container-large-desktop na (1530px + @grid-gutter-width). Teraz .container zmienia swoją szerokość, jeśli moja przeglądarka jest skalowana do ~1600px i ~1200px. Mam nadzieję, że to pomoże.

 2
Author: Celdor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-11 19:27:46