bootstrap 导航条 组件排列

组件排列：

通过添加.navbar-left和.navbar-right工具类让导航链接、表单、按钮或文本对齐。两个类都会通过CSS设置特定方向的浮动样式。

这个两个类的作用于<ul></ul>标签内部类似

<ul>    

    <p class="navbar-text navbar-right"><a href="#" class="navbar-link">登录</a></p>

    <p class="navbar-text navbar-right"><a href="#" class="navbar-link">注册</a></p>

    <form class="navbar-form navbar-right" role="search">

        <div class="form-group">

            <input type="text" class="form-control" placeholder="Search">

        </div>

          <button type="submit" class="btn btn-default">Submit</button>

    </form>

</ul>
当多个navbar-right或者navbar-left出现的时候，按顺序出牌，上述应该为    登录  注册  表单。

如果是如下：

<ul>    

    <form class="navbar-form navbar-right" role="search">

        <div class="form-group">

            <input type="text" class="form-control" placeholder="Search">

        </div>

          <button type="submit" class="btn btn-default">Submit</button>

    </form>

    <p class="navbar-text navbar-right"><a href="#" class="navbar-link">登录</a></p>

    <p class="navbar-text navbar-right"><a href="#" class="navbar-link">注册</a></p>

    

</ul>

表现为： 表单  登录   注册

导航条目前不支持多个 .navbar-right 类，但是可以在<ul></ul>标签内部使用多个。为了让内容之间有合适的空隙，我们为最后一个 .navbar-right 元素使用负边距（margin）。如果有多个元素使用这个类，它们的边距（margin）将不能按照你的预期正常展现。