如何在 Bootstrap 3 中将导航栏居中？

Question

我无法在 Bootstrap 3 中将导航栏居中，因为我不知道如何在 Bootstrap 中编辑 CSS。我在本地下载了 Bootstrap，所以我不知道是否需要编辑 Bootstrap 的 css 文件夹中的 CSS 文件，或者是否应该创建自己的 CSS 文件。 bootstrap文件夹中也有多个CSS文件。我需要编辑哪一项？

我尝试直接在 Bootstrap html 文件中编辑样式，但网站上没有任何反应。

Answer 1

您可以简单地通过向导航链接的父级添加 flex 属性来完成此操作，这样您的代码将如下所示：

.navbar-nav {
  width: 100%;
  display: flex;
  justify-content: center;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <!-- Navbar content here -->
    <ul class="nav navbar-nav">
      <li class="active"><a href="javascript:void(0)">Home</a></li>
      <li><a href="javascript:void(0)">About Us</a></li>
      <li><a href="javascript:void(0)">Contact Us</a></li>
    </ul>
  </div>
</nav>