Cześć, uczę się tworzyć responsywne strony www z użyciem Bootstrapa. Męczę się dzisiaj kilka godzin z odpowiednim ustawieniem divów w navbarze.
Mam taki panel i chodzi o to żeby te 3 elementy (O mnie, wykształcenie kontakt) wyśrodkować względem całego menu, a div z logiem (obrazek) ma pozostać zawsze w lewym rogu, utrzymując pewien odstęp od reszty, nawet na małej rozdzielczości podczas gdy pozostałe elementy mają się zwijać w taki przycisk do zwijania menu. Dobrze by było żeby on znajdował się w prawym rogu. A nie tak krzywo jak poniżej...
Mój kod, który nie do końca robi to czego bym oczekiwał...
<header>
<div class="container-fluid ">
<nav class="navbar navbar-expand-md bg-dark navbar-dark justify-content-center ">
<div id="logo">Logo</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">O mnie</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Wykształcenie</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
body
{
background-image: url("../img/background.png");
}
#logo
{
height: 100%;
width: 160px;
height: 20px;
margin-right: 14vw;
margin-left: 6vw;
color: white;
}
.navbar-dark .navbar-nav .nav-link
{
color: rgba(255,255,255,0.7);
font-size: 30px;
margin-right: 15px;
margin-left: 15px;
}
.navbar-dark .navbar-nav .nav-link:hover
{
color: rgba(255,255,255,1);
}
.container-fluid
{
padding: 0px;
}
Będę wdzięczny za pomoc :)
- screenshot-20180602000259.png (12 KB) - ściągnięć: 141
- screenshot-20180602000509.png (2 KB) - ściągnięć: 153
CSS 
Bootstrap 
HTML 
