在引导程序中居中导航栏(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
更多推荐
发布评论