Twitter bootstrap 引导3导航栏组件对齐
我想知道如何在导航栏中对齐引导组件,例如: 品牌菜单1菜单2菜单3菜单4 我需要知道如何做到这一点: 菜单4菜单3菜单2菜单1品牌 这里是一个类似的引导网站的导航栏的html代码,我想反转Twitter bootstrap 引导3导航栏组件对齐,twitter-bootstrap,alignment,navbar,Twitter Bootstrap,Alignment,Navbar,我想知道如何在导航栏中对齐引导组件,例如: 品牌菜单1菜单2菜单3菜单4 我需要知道如何做到这一点: 菜单4菜单3菜单2菜单1品牌 这里是一个类似的引导网站的导航栏的html代码,我想反转 <!-- Navigation --> <nav class="navbar navbar-custom navbar-fixed-top" role="navigation"> <div class="container">
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo.png" alt="bootstrapwizard logo" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-nav">
<ul class="nav navbar-nav navbar-right">
<li class="page-scroll"><a href="#slider">Slider</a></li>
<li class="page-scroll"><a href="#icon-box">Icons</a></li>
<li class="page-scroll"><a href="#featured">Featured</a></li>
<li class="page-scroll"><a href="#showcase">Showcase</a></li>
<li class="page-scroll"><a href="#grid">Grid</a></li>
<li class="page-scroll"><a href="#contact">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- ./navigation -->
切换导航
谢谢大家 阅读文档
您可以使用navbar right
和navbar left
类对齐组件。所以在你的情况下,你可以这样做
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header navbar-right">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo.png" alt="bootstrapwizard logo" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-nav">
<ul class="nav navbar-nav navbar-left">
<li class="page-scroll"><a href="#slider">Slider</a></li>
<li class="page-scroll"><a href="#icon-box">Icons</a></li>
<li class="page-scroll"><a href="#featured">Featured</a></li>
<li class="page-scroll"><a href="#showcase">Showcase</a></li>
<li class="page-scroll"><a href="#grid">Grid</a></li>
<li class="page-scroll"><a href="#contact">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- ./navigation -->
切换导航