I'm wondering on how I can center the bootstrap 3's navbar menu items. I know they have included a .nav-justified
class but that will just conflict with navbar-nav
if used together. I belive it is being looked into by the dev team.
So is there any work around with CSS that I can achieve a navbar that will keep the navbar menu items/links justified even when the container it is in is re-sized.
Here's a Jsfiddle for you if you need it.
The .nav-justifed
class is to be used with nav-tabs
/ nav-pills
(see bootstrap docs ) and not nav-bar
. The two concepts are very different and should not be confused.
However, you can achieve the effect you are looking for by adding the following css
:
.navbar-nav.nav-justified > li{
float:none;
}
nav-justified
now plays nice with navbar-nav
:
<ul class="nav navbar-nav nav-justified">
See updated jsFiddle .
If using LESS, you can do the following:
.navbar-nav {
.nav-justified;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.