[CSS][HTML]Problem z responsywnościa bootstrapa Opcje

[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>

Ten post edytował viamarimar 29.11.2015, 00:54:08

[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:

[HTML] pobierz, plaintext 
<div class="poziom col-lg-12">
<div class="row">
    <div class="col-xs-3">
    ..
    </div>
 
    <div class="col-xs-9">
    ..
    </div>
</div>
</div>
[HTML] pobierz, plaintext 

Jeśli proporcje mają być inne, to np:

[HTML] pobierz, plaintext 
<div class="poziom col-lg-12">
<div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    ..
    </div>
 
    <div class="col-lg-9 col-md-8 col-sm-6 col-xs-12">
    ..
    </div>
</div>
</div>
[HTML] pobierz, plaintext 

[viamarimar]

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

[HTML] pobierz, plaintext 
<div class="poziom col-lg-12">
    <div class="col-lg-8">
    ..tu tresc
    </div>
 
    <div class="col-lg-4">
    ..tu box
    </div>
</div>
[HTML] pobierz, plaintext 

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:

[HTML] pobierz, plaintext 
<div class="row">           
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
[HTML] pobierz, plaintext 

Na starcie strzal w kolano (zakladajac, ze strona ma byc responsywna) ustawiles wartosci kolumn na duze urzadzenia (tylko na duze!) np.

[HTML] pobierz, plaintext 
<div class="col-lg-8"> 
[HTML] pobierz, plaintext 

. Nastepnie,

[HTML] pobierz, plaintext 
<div class="poziom col-lg-12">
[HTML] pobierz, plaintext 

wykasuj ten "poziom" (swoja droga, chcialbym widziec pionowy bootstrap (IMG:style_emoticons/default/oneeyedsmiley02.png) )

Poczytaj manual odnosnie param .hidden

[HTML] pobierz, plaintext 
http://v4-alpha.getbootstrap.com/layout/responsive-utilities/
[HTML] pobierz, plaintext 

.

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

Metoda prob i bledow napewno dojdziesz do ladu

Ten post edytował JakubBab 1.12.2015, 19:09:58

[viking]

Nawet Bootstrat v4 jest w SASS więc uczenie się LESS takie sobie jest (IMG:style_emoticons/default/wink.gif)