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

Popular posts from this blog

shopping cart - Page redirect not working PHP -

php - How to modify a menu to show sub-menus -

python - Installing PyDev in eclipse is failed -