Bootstrap在导航栏上用下拉菜单并保持对齐

Bootstrap简直就是前速成的宝典

---

尽管bootstrap很牛逼，但是在实际运用中还是会有一些问题，比如：

出现了不对齐的情况，我们看看代码：

<nav class="navbar navbar-default">    <div class="container">        <div class="navbar-header">            <a href="#" class="navbar-brand">标题</a>        </div><ul class="nav navbar-nav">        <li class="active"><a href="#">首页</a></li>        <li><a href="#">资讯</a></li>        <li class="disabled"><a href="#">产品</a></li>        <li><div class="dropdown ">            <button class="btn btn-primary" data-toggle="dropdown">                下拉菜单                <span class="caret"></span>            </button>            <ul class="dropdown-menu">                <li><a href="#">首页</a></li>                <li><a href="#">资讯</a></li>                <li><a href="#">产品</a></li>                <li><a href="#">关于</a></li>            </ul>        </div></li>    </ul>    </div></nav>

解决：我们可以看到，前边的这些a，几乎可以当成文本看，而下拉菜单十足的button。因此，为了保持一致，我们嵌套个p上去。
代码：

<nav class="navbar navbar-default">    <div class="container">        <div class="navbar-header">            <a href="#" class="navbar-brand">标题</a>        </div><ul class="nav navbar-nav">        <li class="active"><a href="#">首页</a></li>        <li><a href="#">资讯</a></li>        <li class="disabled"><a href="#">产品</a></li>        <li><p><div class="dropdown ">            <button class="btn btn-primary" data-toggle="dropdown">                下拉菜单                <span class="caret"></span>            </button>            <ul class="dropdown-menu">                <li><a href="#">首页</a></li>                <li><a href="#">资讯</a></li>                <li><a href="#">产品</a></li>                <li><a href="#">关于</a></li>            </ul>        </div></p></li>    </ul>    </div></nav>

结果：

ok！完美解决！！