Bootstrap 3 导航栏组件对齐答案

【问题标题】：Bootstrap 3 Navbar Components AlignBootstrap 3 导航栏组件对齐
【发布时间】：2014-10-14 00:05:06
【问题描述】：

我想知道如何在导航栏中对齐引导组件，例如：

品牌菜单 1 菜单 2 菜单 3 菜单 4

我需要知道如何做到这一点：

菜单 4 菜单 3 菜单 2 菜单 1 品牌

这是我想要反转的类似引导网站导航栏的 html 代码

  <!-- 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 -->

谢谢大家！

【问题讨论】：

标签： twitter-bootstrap alignment navbar

【解决方案1】：

阅读文档！ - http://getbootstrap.com/components/#navbar-component-alignment

您可以使用 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 -->

【讨论】：