ITnetwork Flashka zdarma C# týden
Akce! Pouze tento týden sleva až 80 % na kurzy C# .NET. Lze kombinovat s akcí 50 % bodů navíc na prémiový obsah!
Brno? Vypsali jsme pro vás nové termíny školení Základů programování a OOP v Brně!
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.