bootstrap justified nav - how to space items? -
i'm using following bootstrap navbar:
<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav nav-pills nav-justified"> <li><a href="#">home</a></li> <li><a href="#">readings</a></li> <li><a href="#">workshops</a></li> <li><a href="#">aligning</a></li> <li><a href="#">yoga</a></li> <li><a href="#">shop</a></li> <li><a href="#">contact</a></li> </ul> </div><!--/.nav-collapse --> </div><!-- container-fluid --> </nav> it works intended, i'd add space between 'buttons'. can't seem find way either add padding or margin li's space out little. suggestions?
i assume solved somehow. in case arrive here.
the problem is, bootstrap uses display: table-cell .nav-justified > li element.
@media (min-width: 768px) .nav-justified>li { display: table-cell; width: 1%; } so instead of margin or padding need use border-spacing. extend bootstrap in own style:
.nav-justified { border-collapse:separate; border-spacing:5px; } see this thread if need more information.
Comments
Post a Comment