在引导程序中居中导航栏(Centering a navbar in bootstrap)

我遇到了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; }

I've encountered problem with Bootstrap where I can't center my navbar on the page. The nav remains off-center, therefore my CSS is incorrect. Has anyone faced a similar problem with centering a navbar using Bootstrap.

Here is the 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>

here is the 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; }

最满意答案

只需将其添加到您的CSS中即可

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

这里的例子

Just add this to your CSS

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

Example here

在引导程序中居中导航栏(Centering a navbar in bootstrap)

我遇到了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; }

I've encountered problem with Bootstrap where I can't center my navbar on the page. The nav remains off-center, therefore my CSS is incorrect. Has anyone faced a similar problem with centering a navbar using Bootstrap.

Here is the 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>

here is the 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; }

最满意答案

只需将其添加到您的CSS中即可

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

这里的例子

Just add this to your CSS

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

Example here