Hey there,
I'm having a lot of trouble centering the contents of the nav, and I'm not
sure where I'm going wrong. Any help would be greatly appreciated!
Since it's the .nav element that I want centered, I thought applying
margin-left and -right would do the trick, but to no avail. Is that
because it's centering the contents inside .nav? Is there a clean and easy
way to center the nav elements inside the navbar?
CSS:
.navbar .nav {
margin-left: auto;
margin-right: auto;
}
HTML:
<div class="navbar">
<div class="navbar-inner container">
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
A
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">A.1</a></li>
<li><a href="#">A.2</a></li>
<li><a href="#">A.3</a></li>
<li class="divider"></li>
<li><a href="#">A.4</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
B
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">B.1</a></li>
<li><a href="#">B.2</a></li>
<li><a href="#">B.3</a></li>
</ul>
</li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
</ul>
</div>
</div>