×
COOKIES
Prezeraním tejto stránky dochádza k spracovaniu cookies. Spracovaniu cookies zabránite v nastaveniach internetového prehliadača alebo nezobrazovaním tejto stránky v internetovom prehliadači.
Vytvárame riešenia

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>
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>
Ž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>
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.


Bootstrap,navbar-right,navbar-header,navbar-default,
Žiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.
Viac informácií nájdete v sekcii O projekte.

Komentáre

Článok neobsahuje zatiaľ žiadne komentáre.

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších