Witam, robię aplikację webową single page i wymyśliłem sobie, że chcę mieć top bar i side bar. Do top bar wykorzystałem "navbar", natomiast do sidebar "nav-stacked" i "nav-pills". I chciałem aby elementy side bar'u były oddzielone za pomocą "nav-divider". Efekt jest taki, że wszystko jest oddzielone oprócz pierwszego i drugiego elementu. Poniżej kod i załącznik
<nav role="navigation" class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-next"></span>
</button>
<a class="navbar-brand" href="#" style="color:white">Home</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav"></ul>
<form class="navbar-form navbar-nav navbar-left">
<div class="form-group">
<input type="text" class="form-control"style="width:250px" />
</div>
<button type="submit" class="btn btn-default">Search</button>
<button type="button" class="btn btn-primary">Advanced search</button>
</form>
</div>
</div>
</nav>
<div id="sideBar" class="sidebar-offcanvas">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li class="nav-divider" style="background-color:black"></li>
<li><a ng-href="#" style="color:black">Home</a></li>
<li class="nav-divider" style="background-color:black"></li>
<li><a ng-href="#Register" style="color:black">Sign in</a></li>
<li class="nav-divider" style="background-color:black"></li>
<li><a ng-href="#" style="color:black">Registration</a></li>
<li class="nav-divider" style="background-color:black"></li>
<li><a ng-href="#" style="color:black">Option</a></li>
<li class="nav-divider" style="background-color:black"></li>
</ul>
</div>
</div>
- Bez tytułu.jpg (8 KB) - ściągnięć: 150
Bootstrap 
HTML 
