如何将Twitter-Bootstrap 3导航栏链接居中? [英] How can I center Twitter-Bootstrap 3 navbar links?
问题描述
如何在我设置的jsFiddle中将按钮居中,以使按钮在导航栏中始终均匀分布并居中?
How can I center the buttons in the jsFiddle I set up so that the buttons are equally spaced and centered within and through-out the navbar?
我尝试了其他方法,例如
I have tried different methods such as
display:inline-block;margin:0 auto; text-align:center;
但是我无法使其正常工作.
But I cannot get it to work.
如果您能提供一些解释,而不是像我想学习的那样仅仅修复CSS,那么我就不必再回到这里了.
If you could give a little explanation instead of just fixing the CSS as I want to learn so I do not have to keep coming back here.
就像它们如何居中^.
Just like how they are centered here ^.
推荐答案
引导程序3 具有可以在nav
上使用的nav-justified
类.不需要额外的CSS:
Bootstrap 3 has a nav-justified
class that can be used on nav
. No extra CSS required:
<div class="container">
<h3 class="text-muted">Project name</h3>
<ul class="nav nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
基于注释,要使用 navbar-nav
类具有全角居中链接,请使用flexbox ...
Based on the comments, to have full-width centered links using the navbar-nav
class, use flexbox...
.navbar-center {
width:100%;
display: flex;
}
.navbar-center>li {
flex:1 1 auto;
}
<div class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav navbar-center text-center">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">More</a></li>
<li><a href="#">Options</a></li>
</ul>
</div>
</div>
https://www.codeply.com/go/6ZE3obnpuP
另请参见
Bootstrap NavBar具有左,中或右对齐项
Bootstrap中的中心导航栏
Also see
Bootstrap NavBar with left, center or right aligned items
Center Navbar in Bootstrap
这篇关于如何将Twitter-Bootstrap 3导航栏链接居中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!