Forum PHP.pl > Responsywność w bootstrapie

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Responsywność w bootstrapie

Forum PHP.pl > Forum > Po stronie przeglądarki

kolesg

12.01.2016, 15:27:44

Czy może mi ktoś powiedzieć lub odesłać mnie do jakiejś strony, gdzie w kodzie css zachodzi zmiana dzięki, której przeglądarka wie że odpowiednie elementy strony po zmianie szerokości ekranu przesuwają się pod siebie?
bootstrap.css: http://wklej.org/id/1902210/

nospor

12.01.2016, 15:37:23

szukaj wstawek z @media, np
@media (min-width: 768px) {

@media (max-device-width: 480px) and (orientation: landscape) {

kolesg

12.01.2016, 16:06:59

Czyli np przy minimalnej szerokości ekranu 992 px za przesuwanie elementów odpowiada tylko ta część kodu ?

Kod

@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }

nospor

12.01.2016, 16:12:56

Ta czesc kodu dodaje dodatkowy atrybut dla podanych klas

kolesg

12.01.2016, 16:17:37

Znakiem tego pewnie chodzi o wartości procentowe przy szerokościach poszczególnych kolumn tak?

Kod

.col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }

  }

nospor

12.01.2016, 16:30:50

Nie bardzo rozumiem o co ci chodzi.

No masz podane ze dla
@media (min-width: 992px)
kolumny te maja lezec obok siebie (float: left) i kazda z nich ma zadana szerokosc.

kolesg

12.01.2016, 18:41:29

Spójrz na sekcje na tym obrazku:
Schemat przy wiekszych rozdzielczosciach
I na tym :
Schemat po zmniejszeniu rozdzielczosci
Cały czas mnie interesuje, która linijka kodu odpowiada za przesuwanie sekcji pod siebie po zmniejszaniu rozdzielczosci.

nospor

12.01.2016, 18:46:24

No tu masz ogolny css dla col-sm
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;

a tu masz
@media (min-width: 992px)
gdy szerokosc bedzie na tyle duza, ze mozna je ukladac obok siebie. Wowczas dodaja float-left, ktory uklada kolumny obok siebie. No pisalem ci to juz w poprzednich postach

Moze zamiast brac sie za responsywnosc, wez sie najpierw za podstawy css bo to one tu sa kluczowa sprawa.

kolesg

12.01.2016, 18:54:13

Thx za pomoc

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.