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！完美解决！！