Barra vertical de navegação do Bootstrap 3
quero criar a barra de navegação [vertical] com bootstrap 3. Tentei isto, mas não resultou.
<ul class="nav nav-pils nav-stacked">
<li>jedan</li>
<li>dva</li>
<li>tri</li>
<li>cetriri</li>
<li>pet</li>
</ul>
Tentei muitos exemplos, mas é tudo com o velho presilha. Como criar essa navegação com o novo bootstrap?
9
Author: Sandro Meier, 2014-04-04
5 answers
nav-pills
A classe precisa de dois.l
:
<ul class="nav nav-pills nav-stacked">
<li>jedan</li>
<li>dva</li>
<li>tri</li>
<li>cetriri</li>
<li>pet</li>
</ul>
22
Author: Samuel De Backer, 2014-04-03 21:17:32
Parece que te falta um l
em nav-pills
(está listado como nav-pils
)
<ul class="nav nav-pills nav-stacked">
<li>jedan</li>
<li>dva</li>
<li>tri</li>
<li>cetriri</li>
<li>pet</li>
</ul>
7
Author: Matthew Darnell, 2014-04-03 21:10:49
Podes usar os comprimidos ou podes escrever isto.
O seu html:
<!--navigation-->
<div class="navbar navbar-inverse navbar-fixed-left">
<a class="navbar-brand" href="#">LOGO</a>
<ul class="nav navbar-nav">
<li><a href="#home"><i class="fa fa-home"></i><span> Link1 </span></a></li>
<li><a href="#info"><i class="fa fa-info-circle"></i><span> Link2 </span></a></li>
<li><a href="#love"><i class="fa fa-heart"></i><span> Link3 </span></a></li>
<li><a href="#work"><i class="fa fa-briefcase"></i><span> Link4 </span></a></li>
<li><a href="#contact"><i class="fa fa-envelope"></i><span> Link5 </span></a></li>
</ul>
</div>
<!--end navigation-->
<!-- 1st section-->
<div class="wrapper">
<div class="container" id="home">
<div class="row">
<h2>Link 1</h2>
</div>
</div>
<!-- 2nd section-->
<div class="container" id="info">
<div class="row">
<h2>Link 2</h2>
</div>
</div>
<!--3rd section-->
<div class="container" id="love">
<div class="row">
<h2>Link 3</h2>
</div>
</div>
<!--4th section-->
<div class="container" id="work">
<div class="row">
<h2>Link 4</h2>
</div>
</div>
<!--5th section-->
<div class="container" id="contact">
<div class="row">
<h2>Link 5</h2>
</div>
</div>
</div>
O seu css:
/* CSS used here will be applied after bootstrap.css */
.navbar-fixed-left {
width: 140px;
position: fixed;
border-radius: 0;
height: 100%;
}
.navbar-fixed-left .navbar-nav > li {
float: none; /* Cancel default li float: left */
width: 139px;
}
.navbar-fixed-left + .container {
padding-left: 160px;
}
.container {
height: 1000px;
}
.wrapper {
margin-left: 140px;
}
A trabalhar o exemplo aqui: bootply
6
Author: Arcsn, 2016-06-30 16:09:28
Usa comprimidos de navbar. Vai funcionar.
1
Author: Anchit, 2016-06-12 05:54:15
Cheguei tarde à festa, mas caso tenhas acabado de chegar e queiras adicionar alguma coisa ao teu nav vertical.
<nav class="list-group">
<ul class="nav">
<li>
<a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false" class="list-group-item">Item 1
</a>
<ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
<li>
<a href="#" class="list-group-item">
Item 2
</a>
</li>
<li>
<a href="#" class="list-group-item">
Item 3
</a>
</li>
</ul>
</li>
</ul>
</nav>
1
Author: Oluwasegun Kesington, 2017-10-12 15:54:24