Diskuze: Bootstrap zarovnání na pravou stranu

Martin Suchodol

Člen

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

Jaroslav Smrž

Tvůrce

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 */

Tadeáš Burda

Člen

Tadeáš Burda :3.2.2020 17:51

<nav class="navbar justify-content-between">

Nahoru Odpovědět

3.2.2020 17:51

Peter Mlich

Člen

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

Martin Suchodol

Člen

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

Martin Suchodol

Člen

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 4.2.2020 11:37

Nahoru Odpovědět

4.2.2020 11:37

Tadeáš Burda

Člen

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

Jaroslav Smrž

Tvůrce

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 */

Martin Suchodol

Člen

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

Martin Suchodol

Člen

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

Martin Suchodol

Člen

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

Tadeáš Burda

Člen

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

Martin Suchodol

Člen

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

Martin Suchodol

Člen

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 4.2.2020 15:26

Nahoru Odpovědět

4.2.2020 15:23

Tadeáš Burda

Člen

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

Martin Suchodol

Člen

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

Nejčastěji vyhledáváné

Diskuze: Bootstrap zarovnání na pravou stranu