[英]How can I center Twitter-Bootstrap 3 navbar links?
如何将我设置的jsFiddle中的按钮居中,这样按钮的间距相等,并且在导航栏的中心和中心?
我尝试了不同的方法,比如
display:inline-block;margin:0 auto; text-align:center;
但我无法让它发挥作用。
如果您可以提供一些解释,而不是仅仅修复CSS,因为我想学习,所以我不必再继续回到这里。
编辑:
就像他们在这里居中一样^。
Bootstrap 3有一个nav-justified
类,可以在nav
上使用。 无需额外的CSS:
<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>
演示: http : //bootply.com/72519
根据评论,要使用navbar-nav
类进行全角度居中链接,请使用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
添加样式
.nav{
text-align: center;
}
这将使文本居中于li。
这些风格应该足够了。 您试图将样式应用于错误的元素。
// This is being applied by the bootstrap
// Set it to 25px instead of the default 15px
.navbar{
padding : 0 25px;
}
// Gave a width of 110px for each li
// as the container is following a fixed width format
li{
width:110px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.