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

Question

我正在努力让我的网站响应Twitter引导程序，但我的导航问题。我正在使用bootstrap的导航菜单，但它不会更改为我的平板电脑/手机上的下拉按钮。它仅显示我的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>