Question

在floowing代码中，我尝试设置float:none并集中技术将项目推送到导航中心，但没有一项工作。

如何让这些项目位于导航栏的中间？

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

Answer 1

你可以这样做：

.container-fluid{
  text-align: center;
}
.navbar .navbar-nav {
  display: inline-block;
  float: none;
}

这将使您的导航项目居中。如果您想尝试一下，请在此处查看JS Fiddle。

如何在bootstrap固定导航栏中集中项目？

1 个答案: