Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Problem z responsywnościa bootstrapa
Forum PHP.pl > Forum > Przedszkole
viamarimar


Chodzi mi o responsywnosc strony podanej w linku. Wraz z jej zmniejszaniem "rozkracza" się góra strony czyli slider i logo.
Testujac na web developerze zly wyglad maja uklady:
-Mały tablet ? układ poziomy (800x600)
-Tablet ? układ poziomy (1024x768)

To dziwne bo jest to tworzone dosc standardowo, prosil bym o pomoc w poprawce, jak to zmienic?

Kod
<div class="poziom col-lg-12">
    <div class="col-lg-3">
    ..
    </div>
    
    <div class="col-lg-9">
    ..
    </div>
</div>
andrew654
Po pierwsze elementy col umieszcza sie w row, po drugie masz zdefiniowany wygląd tylko dla elementów dla szerokości >1200px, poniżej wszystkie elementy col wyświetlają się w szerokości 100% elementu nadrzędnego.
Jeśli chcesz utrzymać logo obok slidera przez cały czas w tej samej proporcji, dajesz:

  1. <div class="poziom col-lg-12">
  2. <div class="row">
  3. <div class="col-xs-3">
  4. ..
  5. </div>
  6.  
  7. <div class="col-xs-9">
  8. ..
  9. </div>
  10. </div>
  11. </div>


Jeśli proporcje mają być inne, to np:
  1. <div class="poziom col-lg-12">
  2. <div class="row">
  3. <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
  4. ..
  5. </div>
  6.  
  7. <div class="col-lg-9 col-md-8 col-sm-6 col-xs-12">
  8. ..
  9. </div>
  10. </div>
  11. </div>


viamarimar
a takie pytanie mam tak jakby srodek strony w bootstrapie na zasadzie

  1. <div class="poziom col-lg-12">
  2. <div class="col-lg-8">
  3. ..tu tresc
  4. </div>
  5.  
  6. <div class="col-lg-4">
  7. ..tu box
  8. </div>
  9. </div>


jednak chcialbym by w wersji responsywnej to co jest lg-4 wyswietlalo sie pierwsze

w wersji "duzej" ma sie wyswietlac po prawo czyli teoretycznie kolejnosci odwrocic nie moge to jak to zrobic?
JakubBab
Tutaj masz biblie w ktorej znajdziesz wszystkie odpowiedzi:

http://getbootstrap.com/css/#grid

Na poczatek proponuje zastosowac sie do rady andrew654. Dla przykladu:

  1. <div class="row">
  2. <div class="col-md-8">.col-md-8</div>
  3. <div class="col-md-4">.col-md-4</div>
  4. </div>


Na starcie strzal w kolano (zakladajac, ze strona ma byc responsywna) ustawiles wartosci kolumn na duze urzadzenia (tylko na duze!) np.
  1. <div class="col-lg-8">
. Nastepnie,
  1. <div class="poziom col-lg-12">
wykasuj ten "poziom" (swoja droga, chcialbym widziec pionowy bootstrap oneeyedsmiley02.png )

Poczytaj manual odnosnie param .hidden
  1. http://v4-alpha.getbootstrap.com/layout/responsive-utilities/
.

Jak zabierasz sie za bootstrapa to koniecznie naucz sie .Less http://getbootstrap.com/css/#less

Metoda prob i bledow napewno dojdziesz do ladu
viking
Nawet Bootstrat v4 jest w SASS więc uczenie się LESS takie sobie jest wink.gif
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.