FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Martin Suchodol
Člen
Avatar
Martin Suchodol:3.2.2020 13:42

Zdravím, přicházím s jednoduchým dotazem a to jak zarovnat odkazy v navbaru na pravou stranu. Zkoušel jsem .navbar-right a .navbar-brand. Ani jedno nefunguje

<div class="collapse navbar-collapse" id="navbar-content">

        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="prihlaseni">Přihlásit</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="kontakt">Kontakt</a>
            </li>
        </ul>
    </div>
 
Odpovědět
3.2.2020 13:42
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na Martin Suchodol
Jaroslav Smrž:3.2.2020 16:27

Ahoj, musíš použít text-right nebo justify-content-right, podle toho, kde a co chceš mít vpravo

Nahoru Odpovědět
3.2.2020 16:27
/* Life runs on code */
Avatar
Tadeáš Burda
Člen
Avatar
Odpovídá na Martin Suchodol
Tadeáš Burda :3.2.2020 17:51 
<nav class="navbar justify-content-between">
 
Nahoru Odpovědět
3.2.2020 17:51
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3.2.2020 21:36

Zalezi taky na tom, jestli pouzivas dokumentaci k tve verzi BT.
https://getbootstrap.com/…onents/navs/#…
justify-content-end
https://getbootstrap.com/…lities/text/#…
text-right
https://getbootstrap.com/…s/dropdowns/#…
dropdown-menu-right

Maji v dokumentaci policko vyhledat, kdyz tam napises right, tak ti nabidne moznosti.

 
Nahoru Odpovědět
3.2.2020 21:36
Avatar
Martin Suchodol
Člen
Avatar
Odpovídá na Tadeáš Burda
Martin Suchodol:4.2.2020 11:33

Nepotřebuji posunot vše v navigaci. Jde mi o umístění jen části navigace

 
Nahoru Odpovědět
4.2.2020 11:33
Avatar
Martin Suchodol
Člen
Avatar
Odpovídá na Peter Mlich
Martin Suchodol:4.2.2020 11:37

Mrknu na to, to co mi radil Jaroslav Smrž efungovalo. Obecně nefunguje nic co jsem na na netu našel. Napadlo mě že mi to ovlivňuje nějaký styl. Ale jediné co přímo měním je barva navbaru.

Celý kód navigace je zde

<nav class="navbar fixed-top navbar-expand-lg navbar-light">
    <a class="navbar-brand" href="uvod"><?= $domain ?></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbar-content">

        <ul class="nav navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="prihlaseni">Přihlásit</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="kontakt">Kontakt</a>
            </li>
        </ul>
    </div>
</nav>
Editováno
 
Nahoru Odpovědět
4.2.2020 11:37
Avatar
Tadeáš Burda
Člen
Avatar
Odpovídá na Martin Suchodol
Tadeáš Burda :4.2.2020 12:21

Chapem ta spravne ze sa snazis zarovna obsah <ul> na pravu stranu? Nemoze to byt tym ze mas v class nastavene mr-auto?? Potom sa to byje? Inak ta fest nechapem oco sa snazis srry

 
Nahoru Odpovědět
4.2.2020 12:21
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na Martin Suchodol
Jaroslav Smrž:4.2.2020 12:31

Tak nevím, jakou verzi bootstrap používáš, ale tento kód ve verzi 4.4 normálně funguje:

<ul class="nav justify-content-end">
    <li class="nav-item">
        <a class="nav-link" href="prihlaseni">Přihlásit</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="kontakt">Kontakt</a>
    </li>
</ul>

Ve starších verzích funguje i text-right.

Nahoru Odpovědět
4.2.2020 12:31
/* Life runs on code */
Avatar
Martin Suchodol
Člen
Avatar
Odpovídá na Tadeáš Burda
Martin Suchodol:4.2.2020 12:31

Ano přesně o to mi jde, ale i když odstraním mr-auto tak se nic neděje. Jakoby to bylo něčím blokované a já nejsem schopný přijít na to čím. Nikterak zatím do bootstrapu nezasahuji. Jendiné co měním je jak jsem již řekl barva navbaru. Jediný další css který používám je tento. Později budu do navbaru sazahovat ještě více. Ale zatím je to jen toto

body {
    padding-top: 70px;
}

.navbar {
    background-color: #708fa0;
}
 
Nahoru Odpovědět
4.2.2020 12:31
Avatar
Martin Suchodol
Člen
Avatar
Odpovídá na Jaroslav Smrž
Martin Suchodol:4.2.2020 12:35

Používám verzi 4.3.1. Aktuálně jsem v navbaru provedl pár změn (jen přidání php a dropdown), ale i tak mi to nefunguje. Zkusím použít jinou verzi třeba se to vzpamatuje

<div class="collapse navbar-collapse" id="navbar-content">

    <ul class="nav navbar-nav justify-content-end">
        <?php if (!$logged) : ?>
            <li clas="nav-item">
                <a class="nav-link" href="prihlaseni">Přihlásit</a>
            </li>
        <?php else : ?>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Profil
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="administrace/logout">Odhlásit</a>
                </div>
            </li>
        <?php endif  ?>
        <li class="nav-item">
            <a class="nav-link" href="kontakt">Kontakt</a>
        </li>
    </ul>
</div>
 
Nahoru Odpovědět
4.2.2020 12:35
Avatar
Martin Suchodol
Člen
Avatar
Odpovídá na Jaroslav Smrž
Martin Suchodol:4.2.2020 12:47

Takže jsem skusil přejít na nejnovější verzi tj. 4.4.1. A výsledek je pořád stejný

 
Nahoru Odpovědět
4.2.2020 12:47
Avatar
Tadeáš Burda
Člen
Avatar
Odpovídá na Martin Suchodol
Tadeáš Burda :4.2.2020 13:01

Mozes poslat screen obrazovky? Kedy ti to nezarovnava? Stale, alebo iba na malych obrazovkach ked je to zbalene? Kontroloval si aj v debuggeru co to realne roby a ake css to pouziva? Vecer sa nato skúsim pozriet a mozno mi niečo napadne,ale takto zhlavy neviem.

 
Nahoru Odpovědět
4.2.2020 13:01
Avatar
Martin Suchodol
Člen
Avatar
Martin Suchodol:4.2.2020 13:15

Dělá to vždy, ale teď jsem to zkoušel i v sandboxu. A tam funguje jen navbar-right. Ale jakmile to spustím u sebe tak to neudělá nic. Screen pošlu později teď musím někam jet

 
Nahoru Odpovědět
4.2.2020 13:15
Avatar
Martin Suchodol
Člen
Avatar
Martin Suchodol:4.2.2020 15:23

Tak už vážně neví ještě jse si s tím hrál v css sandboxu. Celý navbar předělal a v sendboxu funguje vše jak má. Zdroje nahrávám přes CDN ve verzi 3.4.1 a vše jede, jakmile použiji 4.4.1 tak se to rozbije. Ale bez vyjímky vždy funguje jen navbar-right.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar fixed-top navbar-expand-lg navbar-dark">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="<?php $domain ?>">WebSiteName</a>
        </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar-content">

            <ul class="nav navbar-nav navbar-right">
                <?php if (!$logged) : ?>
                    <li class="nav-item">
                        <a class="nav-link" href="prihlaseni"><span class="glyphicon glyphicon-log-in"></span> Přihlásit</a>
                    </li>
                <?php else : ?>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Profil
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="administrace">Administrace</a>
                            <a class="dropdown-item" href="osoby/manage">Nastavení</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="administrace/logout">Odhlásit</a>
                        </div>
                    </li>
                <?php endif  ?>
                <li class="nav-item">
                    <a class="nav-link" href="kontakt">Kontakt</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
  <h3>Right Aligned Navbar</h3>
  <p>The .navbar-right class is used to right-align navigation bar buttons.</p>
</div>

</body>
</html>
Editováno
 
Nahoru Odpovědět
4.2.2020 15:23
Avatar
Tadeáš Burda
Člen
Avatar
Odpovídá na Martin Suchodol
Tadeáš Burda :4.2.2020 15:41

Iba hádam: V dokumentácii 4.4 sa píše pre <ul> class="navbar-nav" a nie "nav navbar-nav". Nerozhadzuje ti to tam to "nav"??? Fakt len hádam a sem na mobile takže ani to nemám nacem skúsiť. Inak fakt netuším.

 
Nahoru Odpovědět
4.2.2020 15:41
Avatar
Martin Suchodol
Člen
Avatar
Martin Suchodol:4.2.2020 15:49

Tak se povedlo, ale zarovnání justify-content-end jsem musel použít na <div> který to obaluje jakožto rozbalovací menu pro menší displeje.

 
Nahoru Odpovědět
4.2.2020 15:49
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 16 zpráv z 16.