如何在 Bootstrap 中将以下导航栏居中?
How do I center the following navbar in Boostrap?
我有一个导航栏,如下所示:
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Hello</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
我只想将列表中的项目居中。我试过了:
.navbar-default {
width: 100%;
text-align: center;
}
但运气不好。
应该对你有帮助margin:0 auto;
您可以按照其他答案的建议将 margin:0 auto;
设置为导航栏样式,或者您也可以向其中添加 bootstrap container
class你也一样。
我有一个导航栏,如下所示:
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Hello</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
我只想将列表中的项目居中。我试过了:
.navbar-default {
width: 100%;
text-align: center;
}
但运气不好。
应该对你有帮助margin:0 auto;
您可以按照其他答案的建议将 margin:0 auto;
设置为导航栏样式,或者您也可以向其中添加 bootstrap container
class你也一样。