Bootstrap pozicování na ose x a y

17. 4. 2019 21:22:01

Zdravím,

nějak se mi stále nedaří najít řešení, jak docílit tohohle výsledku:

Dokáže mi někdo poradit? Věřím, že pro profíky to bude hračka, ale já s tím docela bojuji. Několikrát se mi to podařilo, ale zdá se mi ten kód jako prasárna, tak jsem začal nanovo.

Mám to takto:

a v css pak u .hero nastavené pouze pozadí a height: 100vh;

Děkuji.

17. 4. 2019 21:22:01

https://webtrh.cz/diskuse/bootstrap-pozicovani-na-ose-x-a-y#reply1397278

Ondřej Váško

18. 4. 2019 14:57:01

Napsal Lachimista;1522349
Zdravím,

nějak se mi stále nedaří najít řešení, jak docílit tohohle výsledku:

Dokáže mi někdo poradit? Věřím, že pro profíky to bude hračka, ale já s tím docela bojuji. Několikrát se mi to podařilo, ale zdá se mi ten kód jako prasárna, tak jsem začal nanovo.

Mám to takto:
 <section class="hero d-flex"> <div class="container"> <div class="row justify-content-center text-center my-auto align-middle"> <div class="col-md-8"> <h1>Nadpis H1</h1> </div> </div> </div> </section>

a v css pak u .hero nastavené pouze pozadí a height: 100vh;

Děkuji.

Ahoj, hod nejlepe cely kod na codepen. Nebo nekam, kde to bude mozne videt nazivo (a podivat se pres konzolu). Takhle se chyba blbe hleda.

Nebo ted me v rychlosti napadlo:

P.S.: pri flex-direction: column jsou osy prohozené, tj. align-items Ti centruje po X, justify-content po Y. Direction column jsem dal proto, pokud bys mel více tagu v

. Jeste bys tam mel mit neco jako offset-2, abys to mel vycentrovane po vodorovne ose.

Class .row v BS4 by mela mit display: flex. U class .hero nech height: 100vh.

Pokud nepomuze, ozvi se.

18. 4. 2019 14:57:01

https://webtrh.cz/diskuse/bootstrap-pozicovani-na-ose-x-a-y#reply1397277

Miroslav Foltyn

(3 hodnocení)

18. 4. 2019 15:13:28

Nestaci pouzit neco jako tohle: http://jsfiddle.net/Jehuty/wbaeu84z/ ?

Nemel by byt problem si to libovolne upravit (sam BS nepouzim nevim kolik ma 8 sloupcu ve vychozim nastaveni), a netreba pouzivat kvuli tomu monoliticky framework.

18. 4. 2019 15:13:28

https://webtrh.cz/diskuse/bootstrap-pozicovani-na-ose-x-a-y#reply1397276

Pro odpověď se přihlašte.

Přihlásit