IT-TechCZ s.r.o. | Cloud, VoIP ústředny, vývoj webů a informačních systémů, elektronických systémů, IT poradenství
Zobrazují se odpovědi 1 až 3 z 3

Bootstrap pozicování na ose x a y

  1. Zdravím,

    nějak se mi stále nedaří najít řešení, jak docílit tohohle výsledku:
    [URL="https://ctrlv.cz/shots/2019/04/17/tYCU.png[/URL]

    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:
    Kód:
    <!-- Header -->
        <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.

  2. Co se právě děje na Webtrhu?
  3. Citace Původně odeslal Lachimista Zobrazit příspěvek
    Zdravím,

    nějak se mi stále nedaří najít řešení, jak docílit tohohle výsledku:
    [URL="https://ctrlv.cz/shots/2019/04/17/tYCU.png[/URL]

    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:
    Kód:
    <!-- Header -->
        <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:
    Kód:
        <section class="hero">
          <div class="container">
            <div class="row justify-content-center flex-column align-items-center h-100">
              <div class="col-md-8">
                <h1>Nadpis H1</h1>
              </div>
            </div> 
          </div>
        </section>
    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 <div class="col-md-8">. 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.
    Naposledy upravil ondra15 : 18.04.2019 v 15:22

  4. 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.

Hostujeme u Server powered by TELE3