IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Bootstrap navigace chyba při změně šířky

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Adam Matis
Člen
Avatar
Adam Matis:28.11.2018 17:01

Zdravím mám problém s navigací v bootstrapu. Problém začíná od width 990px a menší, kdy se položky navigace zobrazuji pod sebou a ne vedle sebe. To jsem sice vyřešil, že jsem zpátky přepsal

.navbar-nav {flex-direction:row;}

ale zmizel i margin mezi položkama navigace a hlavně se mi špatně zobrazuje vyskakovací okno pro login.

<header>

       <nav class="bg-primary navbar navbar-expand-lg">

            <span class="navbar-brand">Logo</span>

           <ul class="navbar-nav ml-auto">

                <li class="nav-item">
                    <a class="nav-link text-white" href="#">Něco</a>
                </li>

                <li class="nav-item">
                    <div class="dropdown">
                    <a class="nav-link text-white" data-toggle="dropdown">Přihlášení</a>

                    <div class="dropdown-menu dropdown-menu-right">

                          <h6 class="dropdown-header">Přihlášení</h6>

                          <form class="px-4 py-3">

                          <div class="form-group">

                          <label for="email_login">Email:</label>
                          <input type="email" id="email_login" class="form-control" placeholder="[email protected]">
                          <label for="password_login">Heslo:</label>
                          <input type="password" id="password_login" class="form-control" placeholder="heslo">

                          </div>
                          <button type="submit" class="btn btn-primary">Přihlásit se</button>

                          </form>

                         <div class="dropdown-divider"></div>
                         <a class="dropdown-item" href="#">Registrace</a>
                         <a class="dropdown-item" href="#">Zapomenuté heslo</a>


                   </div>

                     </div>
                       </li>

                       </ul>

                       </nav>

   </header>
 
Odpovědět
28.11.2018 17:01
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:29.11.2018 7:46

Tezko rici. Do nastaveni bootstrapu se nevrta. :)
H6, li, form mivaji v html defaultne nastaveny margin. A totez tusim i pro padding.
U li to tusim bt eliminuje.
Pokud delas takoveto extremni zasahy, tak doporucuji prepisovat i zbytek kodu., Jako, doupravit si ty h6, li, form a pod. Pripadne zkus dat kazdemu prvku border, abys videl, kde se asi vykresluje.

Zkus si zkopirovat kod z dokumentace a neupravovat ho jinak nez pomoci class.
https://getbootstrap.com/…ents/navbar/

 
Nahoru Odpovědět
29.11.2018 7:46
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.