html - 如何在 Boostrap 中居中以下导航栏？

Question

我有一个如下所示的导航栏：

<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;
}

但没有运气。

Answer 1

那应该对你有帮助margin:0 auto;

Answer 2

您可以margin:0 auto;按照其他答案的建议设置为导航栏样式，或者您也可以将引导container类添加到它，这基本上为您做同样的事情。