Question

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

品牌菜单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 -->

谢谢你们！

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

Bootstrap 3 Navbar组件对齐

1 个答案: