Question

我遇到了Bootstrap问题，我无法将导航栏置于页面中心。导航仍然偏离中心，因此我的CSS不正确。有没有人遇到类似的问题，使用Bootstrap对中心导航栏。

这是html：

  <div class="container-fluid" id="main-section">
    <div class="jumbotron" class="col-md-8 col-md-offset-2">
      <div class="row">
        <div >
          <h1 id="name-lead">Title</h1>
          <p class="lead">
            Info
          </p>
        </div>
      </div>
      <div>
        <ul class="nav navbar-nav">
          <li><a href="#">home</a></li>
          <li><a href="#">link2</a></li>
          <li><a href="#">link3</a></li>
          <li><a href="#">link4</a></li>
        </ul>
      </div>
    </div>
  </div>

这是CSS：

.jumbotron {
  background: none;
  text-align: center;
  margin-top: 75px;
  margin-bottom: 75px;
}

.jumbotron .nav ul {
  display: inline-block;
}

.jumbotron .nav ul li {
  display: inline;
}

Answer 1

只需将其添加到您的CSS

即可

.navbar-nav {
   float: none;
   display: inline-block;
}

示例here

在引导程序中居中导航栏

1 个答案: