css - 在平板电脑/手机上制作折叠导航节目的列表图标

Question

我正在尝试使用 Twitter 引导程序使我的网站响应，但我的导航遇到了一些问题。我正在使用引导程序的导航菜单，但它不会更改为我的平板电脑/手机上的下拉按钮。它仅在我的 iPad 为纵向时显示，但在横向时不显示。

我正在使用这些媒体查询：

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { }

/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { }

/* Landscape phones and down */
@media (max-width: 480px) { }

HTML：

<nav class="navbar">
    <div class="row">               
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"></a>

        <div class="nav-collapse collapse">
            <ul class="nav pull-right">
                <li class="home active"><a href="">HOME</a></li>
                <div class="nav-separator hidden-desktop"></div>
                <li><a href="projecten">PROJECTEN</a></li>
                <div class="nav-separator hidden-desktop"></div>
                <li><a href="sketch">SKETCH</a></li>
                <div class="nav-separator hidden-desktop"></div>
                <li><a href="contact">CONTACT</a></li>
            </ul>
        </div>
    </div>
</nav>