Prečo nefunguje navbar-right (Bootstrap)

Pri tvorbe navigačného panela prostredníctvom komponentu Navbar môže nastať situácia kedy nefunguje zarovnanie obsahu cez triedu navbar-right vpravo. Dôvodom tohto javu môže byť nesprávne vnorenie obsahu s triedou navbar-right. Uvedenú situáciu budem demonštrovať na nasledujúcom príklade.

Príklad: Príklad kedy nefunguje zarovnanie vpravo.

1
2
3
4
5
6
7
8
9
10
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <div class="navbar-brand">
                My navbar
            </div>
            <p class="navbar-text navbar-right">Right text</p>
        </div>
    </div>
</nav>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <div class="navbar-brand">
                My navbar
            </div>
            <p class="navbar-text navbar-right">Right text</p>
        </div>
    </div>
</nav>

Príklad: Zarovnanie vpravo.

1
2
3
4
5
6
7
8
9
10
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <div class="navbar-brand">
                My navbar
            </div>
        </div>
        <p class="navbar-text navbar-right">Right text</p>
    </div>
</nav>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <div class="navbar-brand">
                My navbar
            </div>
        </div>
        <p class="navbar-text navbar-right">Right text</p>
    </div>
</nav>

Žiaľ ani tento zápis nie je ešte najsprávnejší. Ako vidieť, text nie je odsadený sprava, čo nevyzerá moc pekne. Pre tento účel je potrebné aplikovať wrapper <div class="nav navbar-nav navbar-right"> a do neho vložiť <span class="navbar-text">.

Príklad: Správne odsadenie sprava.

1
2
3
4
5
6
7
8
9
10
11
12
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <div class="navbar-brand">
                My navbar
            </div>
        </div>
        <div class="nav navbar-nav navbar-right">
            <span class="navbar-text">Right text</span>
        </div>
    </div>
</nav>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <div class="navbar-brand">
                My navbar
            </div>
        </div>
        <div class="nav navbar-nav navbar-right">
            <span class="navbar-text">Right text</span>
        </div>
    </div>
</nav>

Teraz je už zarovnanie a odsadenie zobrazené správne.

Záver

Pre zarovnanie obsahu komponentu Navbar vpravo je potrebné dať pozor, aby obsah nebol umiestnený v kontajneri s triedou navbar-header. Pre správne odsadenie je potrebné použiť kontajner <div class="nav navbar-nav navbar-right"> inak text skončí na hranici navigácie. Prioritou v Bootstrap je správne použitie CSS tried, elementy môžu byť použité rôzne.

Prečo nefunguje navbar-right (Bootstrap)

Záver

Komentáre

Pridať komentár