Reszponzivitási probléma a blokkokkal?
Bootstrappot használok. A weboldal a következőképpen néz ki.
Van egy teljes szélességű menü az oldal tetején.
Alatta létrehoztam két "blokkot" bal és jobb tartalomként.
Alul van a copyright szintén teljes szélességgel.
Szóval a bal tartalom(700px széles) containernek col-4 a jobb tartalom(400px széles) col-3 van beállítva.
Ha a margin a jobb tartalomnak 20px 400px-el van megadva akkor jól néz ki de ha a böngészőt kezdem összehúzni akkor jobb tartalom kilóg a képernyőről és ezt akarom megoldani hogy ugyan úgy a bal tartalom alá kerüljön. Lehetőleg úgy hogy akkor már a bal tartalom szélességét vegye fel.
.tartalom-bal {
background: #000;
margin: 20px 100px 20px 20px;
padding: 50px;
width: 700px;
min-height: 500px;
display: inline-block;
.tartalom-jobb {
background: #000;
margin: 20px 400px;
padding: 50px;
min-width: 400px;
min-height: 500px;
display: inline-block;
válasza:Általában (bármilyen) eszközt csak akkor érdemes használni, ha érted is, hogy mire való, és hogy hogyan működik.
A Bootstrap grid rendszere úgy van felépítve, hogy az egyes oszlopok reszponzívan kövessék a képernyő szélesség változásait, de ha nem rendeltetésszerűen használod, akkor nincs értelme az egésznek.
Ha saját méretekkel akarsz dolgozni - és ez nem egyedi - akkor legalább az oldalszerkezet kialakításakor mellőzd a Bootstrap grid elemeit, mert csak összezavarja a kódodat.
Azt javaslom, hogy tanulmányozd a css media query beállításait (ld #1), mert láthatólag azzal sem vagy tisztában, és úgy akarsz reszponzív megjelenést létrehozni, hogy semmit nem tudsz róla.
Alapvetően a legjobb lenne, ha a "mobil first" kifejezéssel is megismerkednél (google), és aszerint alakítanád ki a megjelenést.
A megoldásod:
1. használsz Bootstrapet (ahogy kell, a dokumentáció szerint) - ez a gyosabb megoldás
2. megérted mi az a media query, és saját egyedi megoldásokat használsz - ez a hosszabb megoldás, de hosszú távon jobban megéri, ha megérted a dolgok működését
Sok sikert
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!