在引导程序中居中置放导航条

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

来源

2016-04-20 Wolfgang Hall

只需添加到你的CSS

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

例here

来源

2016-04-20 23:43:14

在引导程序中居中置放导航条

回答

相关问题