我想将“入门”链接移至导航栏的中间,而不是向左对齐。我该怎么做呢?
HTML:
<div class="container">
<div class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bootstrap 3</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-center">
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Getting started <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://getbootstrap.com/getting-started/#download">Download Bootstrap</a></li>
<li class="divider"></li>
<li class="dropdown-header">Examples</li>
<li><a href="http://getbootstrap.com/getting-started/#template">Basic template</a></li>
<li><a href="http://getbootstrap.com/examples/starter-template/">Starter template</a></li>
<li><a href="http://getbootstrap.com/examples/grid/">Grids</a></li>
<li><a href="http://getbootstrap.com/examples/jumbotron/">Jumbotron</a></li>
<li><a href="http://getbootstrap.com/examples/navbar/">Navbar</a></li>
<li><a href="http://getbootstrap.com/examples/signin/">Sign-in page</a></li>
<li><a href="http://getbootstrap.com/examples/sticky-footer/">Sticky footer</a></li>
<li><a href="http://getbootstrap.com/examples/offcanvas/">Offcanvas</a></li>
<li><a href="http://getbootstrap.com/examples/carousel/">Carousel</a></li>
<li><a href="http://getbootstrap.com/examples/theme/">Theme</a></li>
<li class="divider"></li>
<li class="dropdown-header">Compatibility</li>
<li><a href="http://getbootstrap.com/getting-started/#migration">Migrating from 2.x to 3.0</a></li>
<li><a href="http://getbootstrap.com/getting-started/#browsers">Browser support</a></li>
<li><a href="http://getbootstrap.com/getting-started/#third-parties">Third party support</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="http://getbootstrap.com/customize">Customize</a></li>
</ul>
</div>
</div>
<div class="jumbotron">
<h1>Twitter Bootstrap 3.0</h1>
<p class="lead">Starter template with CSS and JS included.</p>
<p><a class="btn btn-lg btn-primary" href="#fork">Fork this fiddle</a></p>
</div>
</div>
您可以居中添加text-align:center
到包含父项的导航栏,并设置要居中的导航栏,display:inline-block
然后删除float:left
:
.navbar-default{
text-align:center;
}
.navbar-center{
display: inline-block;
float: none;
}
调整小提琴
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句